CSS3结构选择器

CSS3结构性伪类

  • E:nth-child(n)表示E的父元素中的第n个子节点
    从1开始他先找到父元素下面对应子节点的个数,然后再找是否是E标签
    他必须满足2点第一点是E标签的元素,第二点是必须是第N个元素
我是一个普通的div标签
我是一个普通的span标签

我是第1个p标签

我是第2个p标签

这样的话p:nth-child(2)将不会选择任何元素。

  • p:nth-child(odd){background:red;} //表示匹配奇数行

  • p:nth-child(even){background:red;} //表示匹配偶数行

  • p:nth-child(2n){background:red;} //里面是公式,n从0开始计算但是nth-child(0)他找不到。所以从1才开始了

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

  • E:nth-of-type(n) 表示E父元素中的第n个子节点,且标签是E

这个和nth-child(n)不一样。他先找到的E标签然后再找到对应的个数

  • E:nth-last-of-type(n)表示E父元素的第n个节点,且类型是E从后向前计算
  • E:empty表示E元素中没有子节点.注意子节点包含文本节点
  • E:first-child 表示E元素中第一个子节点
  • E:last-child表示E元素中最后一个子节点



    
    
    CSS3结构



p1

h1

p2

h2

p3

h3

p5

链接

实例新浪头部导航

2017-05-03_115109.jpg



    
    新浪头部导航
    





你可能感兴趣的:(CSS3结构选择器)