lE:nth-child(n)  表示E父元素中的第n个子节点

p:nth-child(odd){background:red}/*匹配奇数行*/

p:nth-child(even){background:red}/*匹配偶数行*/

Css3 选择器 –结构性伪类

p:nth-child(2n){background:red}

Css3 选择器 –结构性伪类

lE:nth-last-child(n) 表示E父元素中的第n个子节点,从后向前计算

lE:nth-of-type(n)  表示E父元素中的第n个子节点,且类型为E

lE:nth-last-of-type(n)表示E父元素中的第n个子节点,且类型为E,从后向前计算

lE:empty 表示E元素中没有子节点。注意:子节点包含文本节点

Css3 选择器 –结构性伪类  

=========================================================

lE:first-child 表示E元素中的第一个子节点 ==== E:nth-child(1)

lE:last-child 表示E元素中的最后一个子节点  === nth-last-child(1)

lE:first-of-type 表示E父元素中的第一个子节点且节点类型是E的  ===  nth-of-type(1)

lE:last-of-type 表示E父元素中的最后一个子节点且节点类型是E的 === nth-last-of-type(1)

lE:only-child表示E元素中只有一个子节点。注意:子节点不包含文本节点

lE:only-of-type 表示E的父元素中只有一个子节点,且这个唯一的子节点的类型必须是E。注意:子节点不包含文本节点

Css3 选择器 –结构性伪类

l实例:新浪头部导航

Css3 选择器 –结构性伪类

相关文章:

  • 2022-12-23
  • 2023-04-03
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-02-04
猜你喜欢
  • 2019-01-22
  • 2021-11-13
  • 2021-11-21
  • 2022-01-12
  • 2022-12-23
  • 2021-06-01
  • 2021-08-27
相关资源
相似解决方案