结构选择器-CSDN博客

本文链接：https://blog.csdn.net/weixin_43263566/article/details/127237968

结构选择器上

1. 选择ul里面的第一个孩子 li

  <style>
    /* 1.选择ul里面的第一个孩子 li */
    ul li:first-child {
      background-color: pink;
    }
  </style>

<body>
  <ul>
    <li>我是第1一个孩子</li>
    <li>我是第2一个孩子</li>
    <li>我是第3一个孩子</li>
    <li>我是第4一个孩子</li>
    <li>我是第5一个孩子</li>
    <li>我是第6一个孩子</li>
    <li>我是第7一个孩子</li>
    <li>我是第8一个孩子</li>
  </ul>
</body>

效果图

2. 选择ul里面的最后一个孩子 li

  <style>
   /* 2.选择ul里面的最后一个孩子 li */
    ul li:last-child {
      background-color: pink;
    }
  </style>

<body>
  <ul>
    <li>我是第1一个孩子</li>
    <li>我是第2一个孩子</li>
    <li>我是第3一个孩子</li>
    <li>我是第4一个孩子</li>
    <li>我是第5一个孩子</li>
    <li>我是第6一个孩子</li>
    <li>我是第7一个孩子</li>
    <li>我是第8一个孩子</li>
  </ul>
</body>

效果图

3. 选择ul里面的某个孩子 li nth-child(n) 1.可以是数字，2可以是关键字：even偶数，odd奇数

  <style>
     /* 3.选择ul里面的某个孩子 li nth-child(n) 1.可以是数字 ，2可以是关键字：even偶数，odd奇数*/
    ul li:nth-child(2) {
      background-color: skyblue;
    }
  </style>

<body>
  <ul>
    <li>我是第1一个孩子</li>
    <li>我是第2一个孩子</li>
    <li>我是第3一个孩子</li>
    <li>我是第4一个孩子</li>
    <li>我是第5一个孩子</li>
    <li>我是第6一个孩子</li>
    <li>我是第7一个孩子</li>
    <li>我是第8一个孩子</li>
  </ul>
</body>

效果图

4. 选择ul里面的偶数行

  <style>
   /* 4.选择ul里面的偶数行 */
    ul li:nth-child(even) {
      background-color: skyblue;
    }
  </style>

<body>
  <ul>
    <li>我是第1一个孩子</li>
    <li>我是第2一个孩子</li>
    <li>我是第3一个孩子</li>
    <li>我是第4一个孩子</li>
    <li>我是第5一个孩子</li>
    <li>我是第6一个孩子</li>
    <li>我是第7一个孩子</li>
    <li>我是第8一个孩子</li>
  </ul>
</body>

效果图

5. 选择ul里面的奇数行

  <style>
   /* 5.选择ul里面的奇数行 */
    ul li:nth-child(odd) {
      background-color: rgb(135, 235, 177);
    }
  </style>

<body>
  <ul>
    <li>我是第1一个孩子</li>
    <li>我是第2一个孩子</li>
    <li>我是第3一个孩子</li>
    <li>我是第4一个孩子</li>
    <li>我是第5一个孩子</li>
    <li>我是第6一个孩子</li>
    <li>我是第7一个孩子</li>
    <li>我是第8一个孩子</li>
  </ul>
</body>

效果图

6. 选择ol里面的所有孩子 n从0开始每次加一

  <style>
/* 6.选择ol里面 的所有孩子 n从0开始每次加一 */
   ol li:nth-child(n) {
      background-color: rgb(135, 235, 177);
    }
  </style>

<body>
    <ol>
    <li>我是第1一个孩子</li>
    <li>我是第2一个孩子</li>
    <li>我是第3一个孩子</li>
    <li>我是第4一个孩子</li>
    <li>我是第5一个孩子</li>
    <li>我是第6一个孩子</li>
    <li>我是第7一个孩子</li>
    <li>我是第8一个孩子</li>
  </ol>
</body>

效果图

7. nth-child(n) 里面可以加公式 1. 2n 偶数 2.2n+1 奇数 3.5n 5 10 15....

  <style>
 /* 7.nth-child(n) 里面可以加公式 1. 2n  偶数  2.2n+1 奇数  3.5n  5 10 15.... 
         4.n+5 从第五个开始（包括第5个）到最后一个  5.-n+5 前五个（包括第5个）*/
    dl :nth-child(2n) {
      background-color: rgb(135, 235, 177);
    }

    dl :nth-child(2n+1) {
      background-color: rgb(231, 16, 44);
    }
  </style>

<body>
  <dl>
    <dt>我是第1一个孩子</dt>
    <dd>我是第2一个孩子</dd>
    <dd>我是第3一个孩子</dd>
    <dd>我是第4一个孩子</dd>
    <dd>我是第5一个孩子</dd>
    <dd>我是第6一个孩子</dd>
    <dd>我是第7一个孩子</dd>
    <dd>我是第8一个孩子</dd>
    <dd>我是第9一个孩子</dd>
    <dd>我是第10一个孩子</dd>
  </dl>
</body>

效果图

结构选择器下

<style>
  /* 1.选择ul里面的第一个孩子 li */
  ul li:first-of-type {
    background-color: pink;
  }

  /* 2.选择ul里面的最后一个孩子 li */
  ul li:last-of-type {
    background-color: pink;
  }

  /* 3.选择ul里面的某个孩子 li nth-child(n) 1.可以是数字 ，2可以是关键字：even偶数，odd奇数*/
  ul li:nth-of-type(2) {
    background-color: pink;
  }

  /* 区别:nth-child会把所有的盒子都排列序号 */
  /* 不起效 */
  section div:nth-child(1) {
    background-color: rgb(31, 168, 72);
  }

  /* nth-of-type(n) 会把指定的盒子排列序号 */
  section div:nth-of-type(1) {
    background-color: rgb(201, 114, 15);
  }
</style>

<body>
  <ul>
    <li>我是第1一个孩子</li>
    <li>我是第2一个孩子</li>
    <li>我是第3一个孩子</li>
    <li>我是第4一个孩子</li>
    <li>我是第5一个孩子</li>
    <li>我是第6一个孩子</li>
    <li>我是第7一个孩子</li>
    <li>我是第8一个孩子</li>
  </ul>
  <section>
    <p>光头强</p>
    <div>熊大</div>
    <div>熊二</div>
  </section>
</body>

效果图