前端技术--css3的nth-child和nth-of-type使用及代码_.box li:nth-of-type(even)-优快云博客

本文链接：https://blog.youkuaiyun.com/ANotes/article/details/111824912
前端技术--css3的nth-child和nth-of-type使用及代码

代码：
<html>
  <head>
    <meta charset="UTF-8">
    <title>ANotes 测试</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul, ol {
        list-style: none;
      }
      .box {
        margin: 20px auto;
        width: 300px;
      }
      .box li {
        line-height: 35px;
        padding: 0 5px;
        border: 1px dashed peru;
        
        /*超出一行的内容自动裁切，以省略号代替*/
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      /* CSS3 样式 */
      /*
       * nth-child(n): 当前容器所有子元素中的第N个
       * .box li:nth-child(1)：BOX容器所有子元素中的第一个并且标签名是LI的
       */
      /* .box li:nth-child(1) {
        color: red;
      } */

      /*
       * nth-of-type(n)：先给当前容器按照某一个标签名进行分组，获取分组中的第N个
       * .box li:nth-of-type(1)：先获取BOX中所有的LI，在获取LI中的第一个
       */
      /* .box li:nth-of-type(even) { EVEN: 偶数 ODD：奇数
        color: red;
      } */

      .box li:nth-of-type(3n+1) {
        color: red;
      }

      .box li:nth-of-type(3n+2) {
        color: green;
      }

      .box li:nth-of-type(3n+3) {
        color: blue;
      }

      /* 鼠标划过的额样式，鼠标离开回归原有样式 */
      .box li:hover {
         background: papayawhip;
      }
    </style>
  </head>
  <body>
    <ul class="box">
      <span>是我呀！</span>
      <li>1) 长风破浪会有时，直挂云帆济沧海。——李白《行路难》</li>
      <li>2) 老骥伏枥，志在千里。烈士暮年，壮心不已。——曹操《龟虽寿》</li>
      <li>3) 博观而约取，厚积而薄发。——苏轼《稼说送张琥》</li>
      <li>4) 不飞则已，一飞冲天;不鸣则已，一鸣惊人。司马迁《史记》</li>
      <li>5) 天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为。——《孟子》</li>
      <li>6) 老当益壮，宁移白首之心?穷且益坚，不坠青云之志。——王勃《滕王阁序》</li>
    </ul>
  </body>
</html><html>
  <head>
    <meta charset="UTF-8">
    <title>ANotes 测试</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul, ol {
        list-style: none;
      }
      .box {
        margin: 20px auto;
        width: 300px;
      }
      .box li {
        line-height: 35px;
        padding: 0 5px;
        border: 1px dashed peru;
        
        /*超出一行的内容自动裁切，以省略号代替*/
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      /* CSS3 样式 */
      /*
       * nth-child(n): 当前容器所有子元素中的第N个
       * .box li:nth-child(1)：BOX容器所有子元素中的第一个并且标签名是LI的
       */
      /* .box li:nth-child(1) {
        color: red;
      } */

      /*
       * nth-of-type(n)：先给当前容器按照某一个标签名进行分组，获取分组中的第N个
       * .box li:nth-of-type(1)：先获取BOX中所有的LI，在获取LI中的第一个
       */
      /* .box li:nth-of-type(even) { EVEN: 偶数 ODD：奇数
        color: red;
      } */

      .box li:nth-of-type(3n+1) {
        color: red;
      }

      .box li:nth-of-type(3n+2) {
        color: green;
      }

      .box li:nth-of-type(3n+3) {
        color: blue;
      }

      /* 鼠标划过的额样式，鼠标离开回归原有样式 */
      .box li:hover {
         background: papayawhip;
      }
    </style>
  </head>
  <body>
    <ul class="box">
      <span>是我呀！</span>
      <li>1) 长风破浪会有时，直挂云帆济沧海。——李白《行路难》</li>
      <li>2) 老骥伏枥，志在千里。烈士暮年，壮心不已。——曹操《龟虽寿》</li>
      <li>3) 博观而约取，厚积而薄发。——苏轼《稼说送张琥》</li>
      <li>4) 不飞则已，一飞冲天;不鸣则已，一鸣惊人。司马迁《史记》</li>
      <li>5) 天将降大任于斯人也，必先苦其心志，劳其筋骨，饿其体肤，空乏其身，行拂乱其所为。——《孟子》</li>
      <li>6) 老当益壮，宁移白首之心?穷且益坚，不坠青云之志。——王勃《滕王阁序》</li>
    </ul>
  </body>
</html>
结果展示：