CSS复合选择器之后代选择器

最新推荐文章于 2023-03-06 14:29:46 发布

不想秃头的小魏

最新推荐文章于 2023-03-06 14:29:46 发布

阅读量1.7k

点赞数 1

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_45739910/article/details/127102322

版权

在应用中，经常会看到一个div标签下包含了许多标签，当我们想要通过CSS设计其中某一个标签的样式的时候，可以使用后代选择器进行样式修改。

1. 将 ol 标签里面的小 li 选取出来将其修改为 green。切记 ol 与 li 之间使用一个空格分开。

<html>
<head>
    <style>
        /* 把ol里面的小li选出来改为green */
        ol li {
            color: green;
        }
    </style>
</head>
<body>
     <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>
</body>
</html>

2. 将 ol 下 li 中的 a 链接选取来，修改颜色为红色。

    <style>
        ol li a {
            color: red;
        } 
    </style>
   <ol>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是孙子</a></li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li> <a href="#">不会变化的</a> </li>
    </ul>

3. 使用类选择器+后代选择器修改 nav类名下的 li 中的 a 链接颜色。

    <style>
        /* 使用类选择器+后代选择器 */
        .nav li a {
            color: yellow;
        }
    </style>
<body>
   <!-- 元素1 和 元素2 可以是任意基础选择器 -->
    <ul class="nav">
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
        <li> <a href="#">不会变化的</a> </li>
        <li> <a href="#">不会变化的</a> </li>
        <li> <a href="#">不会变化的</a> </li>
        <li> <a href="#">不会变化的</a> </li>
    </ul>

    <!-- 
后代选择器又称为包含选择器,可以选择父元素里面子元素.其写法就是把外层标签写在前面，
内层标签写在后面，中间用空格分割。当标签发生嵌套时，内层标签就成为外层标签的后代。
     -->
</body>