CSS基础学习（7）——复合选择器

最新推荐文章于 2024-05-31 23:54:51 发布

努力码字的辣椒油

最新推荐文章于 2024-05-31 23:54:51 发布

阅读量315

点赞数 2

文章标签： css 学习 css3 前端 html

本文链接：https://blog.csdn.net/mdyLjyCN/article/details/124802913

版权

复合选择器：

在CSS中，可以根据选择器的类型吧选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器智商，对基本选择器进行组合形成的。

复合选择器可以更准确、更高效的选择目标元素（标签）。

复合选择器是有两个或多个基础选择器，通过不同的方式组合而成的。

乘用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。

后代选择器：

后代选择器又称为包含选择器，可以选择父元素里面的子元素，器械发是吧外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签的后代。

父标签后代标签 {

属性: 属性值;

}

父标签与后代标签中间使用空格隔开。

这里的后代可以使子标签，也可以是子标签的子标签，只要嵌套在父标签内都可以。

子选择器：

父标签>子标签

子选择器只能选择某元素最近的一级子元素。

中间使用">"号隔开。

附上今日学习代码：

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div>a {
            color: yellow;
        }
        ol li {
            color: pink;
        }
        ol li a {
            color: red;
        }
    </style>
</head>

<body>
    <ol>
        <li>我是ol的孩子</li>
        <li><a href="#">我是ol的孩子</a></li>
    </ol>
    <ul>
        <li>我是ul的孩子</li>
        <li>我是ul的孩子</li>
    </ul>
    <div>
        <p><a href="#">我是子元素的子元素</a></p>
        <a href="#">我是最近的一级子元素</a>
    </div>
</body>

努力码字的辣椒油

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS基础学习（7）——复合选择器

复合选择器：在CSS中，可以根据选择器的类型吧选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器智商，对基本选择器进行组合形成的。复合选择器可以更准确、更高效的选择目标元素（标签）。复合选择器是有两个或多个基础选择器，通过不同的方式组合而成的。乘用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等。后代选择器：后代选择器又称为包含选择器，可以选择父元素里面的子元素，器械发是吧外层标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就
复制链接

扫一扫