第22题：关于css3 伪类选择器

前面的话

最近刷题，关于css3伪类选择器知识点有些模糊，这里总结一下。

题目

对于以下 HTML，下列选项中哪一个 CSS 选择器效果与其他的不同:

   html
    <p>
    <span>A</span>
    <span>B</span>
    <span>C</span>
    </p>
 

A: span:first-child
B: span:nth-child(0)
C: span:nth-child(-n+1)
D: span:nth-last-child(3)

解析

举个例子说明：

 <div>
        <h1>标题</h1>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <p>哈哈</p>
        <span>文本</span>
  </div>

• item:first-child

  表示选择的元素是item（id，class或标签）,并且它是其父元素中的第1个元素

    h1:first-child {
      color: red;
  }
  

  上面的代码，表示选择的元素是h1，并且是其父元素中的第一个元素
  

• item:last-child

  表示选择的元素是item（id，class或标签），并且它是其父元素中的最后一个元素

  span:last-child {
  	color:red;
  }
  

  

• item:nth-child(n)

  表示选择的元素是item，并且它是其父元素的第n个元素, n必须大于0，不要求元素类型

   p:nth-child(2) {
          color: green;
      }
  

  上面的代码中，表示选择的元素是p,并且它是其父元素的第2个元素；如果是p:nth-child(1)，则不能选择上，因为其不是父元素的第一个元素。
  

• nth-child()中还支持表达式，例如：nth-child(2n + 1)、nth-child(-n + 1)等

  p:nth-child(2n + 2) {
  	color: red;
  	}
  

  

• item:nth-last-child(n):与item:nth-child(n)一样，只是前者是从最后一个元素数起

     p:nth-last-child(2) {
     	 color: red;
     	 }  
  

  上面的代码，表示选择的元素是p,并且它是其父元素倒数第2个元素

  

• item:first-of-type

  表示选择的元素是item，并且它是父元素中特定类型item中的第一个元素

   p:first-of-type {
      	color: red;
   }
  

  上面代码表示，div中第一个p元素的颜色为red
  

• item:last-of-type: 与item:first-of-type相似，只不过是倒过来计数

• item:nth-of-type(n)

  表示选择的元素是item,并且它是其父元素中特定类型item中的第n个

  p:nth-of-type(3) {
  	color: red;
  }
  

  上面的代码表示，div中的第3个p元素的颜色为red
  

• item:nth-last-of-type(n):与item:nth-of-type(n)类似,只不过是倒过来计数

• item:only-child

  表示选择的元素是item,并且其父元素只有这一个元素,否则不能被选中

• item:empty

  表示选择的元素是item,并且其内容为空，才会被选中

回到本题

题中span:first-child、 span:nth-child(-n+1)、span:nth-last-child(3)都选择的是第一个span元素，而B选项中，nth-child(n)n不能为0，在css中起始的都是1，只有在js中才是0