关于结构伪类选择器 :nth-child() 和 :nth-of

作者: 新海岸 | 来源:发表于2017-02-18 14:55 被阅读28次

CSS学习----结构伪类选择器(nth-child、nth-o
关于结构伪类选择器 :nth-child() 和 :nth-of
CSS3 积累（2）之结构伪类选择器
web-6
css3-1
选择器
CSS进阶知识点--CSS3伪类选择器和伪元素
CSS3学习
CSS3选择器--结构性伪类选择器
CSS3 选择器

不知道怎么说，直接看例子作对比就明白了
:nth-child(n) 从父元素中选取符合条件的子元素，n可以是数字，关键词，公式
:nth-of-type(n) 从父元素中选择符合条件的指定类型的子元素，n可以是数字，关键词，公式

基本代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
     <style>
     /* 效果1 */
     p:nth-child(-n+3){
          background-color: #f00;
     }
     /* 效果2 */
     body p:nth-child(-n+3){
            background-color: #f00;
     }
     /* 效果3 */
     body :nth-child(-n+3){
          background-color: #f00;
     }
     /* 效果4 */
     p:nth-of-type(-n+3){
          background-color: #f00;
     }
     /* 效果5 */
     body p:nth-of-type(-n+3){
          background-color: #f00;
     }
     /* 效果6 */
     body :nth-of-type(-n+3){
          background-color: #f00;
     }
  </style>
</head>
<body>
    <h1>这是h1</h1>
    <h2>这是h2</h2>
    <p>这是p1</p>
    <p>这是p2</p>
    <p>这是p3</p>
    <p>这是p4</p>
    <span>span 1</span>
    <span>span 2</span>
    <span>span 3</span>
    <span>span 4</span>
    <div>div 1</div>
    <div>div 2</div>
    <div>div 3</div>
    <div>div 4</div>    
</body>
</html>

六种效果如下：