CSS 结构伪类选择器有哪些?

微距摄影发表于2020-03-24 18:18:00

结构伪类选择器,可以根据元素在文档中所处的位置,来动态选择元素,从而减少HTML文档对ID或类的依赖,有助于保持代码干净整洁。

表 2-6 结构伪类选择器
E:last-child选择父元素的倒数第一个子元素E,相当于E:nth-last-child(1)3
E:nth-child(n)选择父元素的第n个子元素,n从1开始计算3
E:nth-last-child(n)选择父元素的倒数第n个子元素,n从1开始计算3
E:first-of-type选择父元素下同种标签的第一个元素,相当于E:nth-of-type(1)3
E:last-of-type选择父元素下同种标签的倒数第一个元素,相当于E:nth-last-of-type(1)3
E:nth-of-type(n)与:nth-child(n)作用类似,用作选择使用同种标签的第n个元素3
E:nth-last-of-type与:nth-last-child作用类似,用作选择同种标签的倒数第一个元素3
E:only-child选择父元素下仅有的一个子元素,相当于E:first-child:last-child或E:nth-child(1):nth-last-child(1)3
E:only-of-type选择父元素下使用同种标签的唯一子元素,相当于E:first-of-type:last-of-type或E:nth-of-type(1):nth-last-of-type(1)3
E:empty选择空节点,即没有子元素的元素,而且该元素也不包含任何文本节点3
E:root选择文档的根元素,对于HTML文档,根元素永远HTML3

结构伪类选择器很容易遭到误解,需要特别强调。如,p:first-child表示选择父元素下的第一个子元素 p,而不是选择 p 元素的第一个子元素。

需要注意的是,结构伪类选择器中,子元素的序号是从 1 开始的,也就是说,第一个子元素的序号是 1,而不是 0。换句话说,当参数 n 的计算结果为 0 时,将不选择任何元素。

接下来,简单介绍 :first-child、:last-child、:nth-child、:nth-of-type、:empty 这几个选择器,其他选择器的功能在表格中已经描述清楚,不再赘述。

发表 b1429f03-6db8-11ea-8691-2047479581fe
相关文章 更多>>
企业云智库-职场经验分享平台-免费java在线学习平台