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

最新推荐文章于 2023-04-04 17:57:45 发布

ohmorning

最新推荐文章于 2023-04-04 17:57:45 发布

阅读量302

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_41818857/article/details/104148305

版权

<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-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选择器在计算子元素是奇数个还是偶数个时，是连同父元素中的所有子元素一起计算的。

所以上面的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>