:nth-child的坑用:nth-of-type解决

<style>
        /*对所有奇数个子元素使用样式*/
        li:nth-child(odd){
     
            background-color: yellow;
        }
        /*对所有偶数个子元素使用样式*/
        li:nth-child(even){
     
            background-color: red;
        }
   </style>
<body>
   <ul>
       <li>项目列表1</li>
       <li>项目列表2</li>
       <li>项目列表3</li>
       <li>项目列表4</li>
       <li>项目列表5</li>
   </ul>
</body>

:nth-child的坑用:nth-of-type解决_第1张图片
使用nth-child选择器与nth-last-child选择器时,虽然在对列表项目使用时没有问题,但是当用于其他元素时,还是会出现问题。
例如:

<style>
        /*对所有奇数个子元素使用样式*/
        h2:nth-child(odd){
     
            background-color: yellow;
        }
        /*对所有偶数个子元素使用样式*/
        h2:nth-child(even){
     
            background-color: red;
        }
    </style>
<body>
   <div>
       <h2>小猴子1</h2>
       <p>花果山水帘洞齐天大圣孙悟空</p>
       <h2>小猴子2</h2>
       <p>花果山水帘洞齐天大圣孙悟空</p>
       <h2>小猴子3</h2>
       <p>花果山水帘洞齐天大圣孙悟空</p>
   </div>
</body>

理想状态下应该是小猴子1的背景色是黄色,小猴子2的背景色是红色,小猴子3的背景色是黄色,可运行结果如下图所示:
:nth-child的坑用:nth-of-type解决_第2张图片

原因:nth-child选择器在计算子元素是奇数个还是偶数个时,是连同父元素中的所有子元素一起计算的。

所以上面的css代码可以理解为:
当div元素中的第奇数个子元素如果是h2时元素时背景色变为黄色。
当div元素中的第偶数个子元素如果是h2时元素时背景色变为红色。

解决方法:使用nth-of-type

这样在计算子元素是第奇数个子元素还是第偶数个子元素时,就只针对同类型的子元素进行计算了。

<style>
         /*对所有奇数个子元素使用样式*/
         h2:nth-of-type(odd){
     
            background-color: yellow;
        }
        /*对所有偶数个子元素使用样式*/
        h2:nth-of-type(even){
     
            background-color: red;
        }
</style>
<body>
    <div>
        <h2>小猴子1</h2>
        <p>花果山水帘洞齐天大圣孙悟空</p>
        <h2>小猴子2</h2>
        <p>花果山水帘洞齐天大圣孙悟空</p>
        <h2>小猴子3</h2>
        <p>花果山水帘洞齐天大圣孙悟空</p>
    </div>
</body>

:nth-child的坑用:nth-of-type解决_第3张图片

你可能感兴趣的:(css)