结构伪类选择器的分类以及使用语法

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

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

注意:

  1. ul>li:nth-child(3)表达的并不是一定选择列表ul元素中的第3个子元素li,仅有列表ul中第3个li元素前不存在其他的元素,命题才有意义,否则不会改变列表第3个li元素的样式。
  2. E:nth-child(n) 中参数只能是n,不可以用其他字母代替。
  3. E:nth-child(odd) 选择的是奇数项,而使用:nth-last-child(odd) 选择的却是偶数项

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

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

给TA打赏
共{{data.count}}人
人已打赏
知识碎片

HTML中CSS浮动布局的特点

2021-11-24 21:04:30

知识碎片

HTML中CSS清除浮动的方法总结

2021-11-25 12:32:46

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧