css选择器进阶

黑马程序员小张

已于 2022-04-01 22:34:39 修改

阅读量362

点赞数

文章标签： css html5

于 2022-04-01 22:33:21 首次发布

本文链接：https://blog.csdn.net/z000802/article/details/123909720

版权

本文详细介绍了CSS选择器的进阶用法，包括复合选择器、子代选择器、并集选择器、交集选择器、hover伪类选择器以及Emmet语法。通过对这些选择器的理解和应用，开发者可以更精确地控制网页元素的样式，提高开发效率。

摘要由CSDN通过智能技术生成

1.复合选择器: 空格

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2{css}
结果：
- 在选择器1所找到标签的后代(儿子、孙子、重孙子...)中，找到满足选择器2的标签，设置样式

注意点：
1. 后代包括：儿子、孙子、重孙子......
2. 后代选择器中，选择器与选择器之前通过空格隔开

<style>
        /* 找到div的儿子p设置文字颜色是红色 */
        /* 父选择器 后代选择器{} */
        div p {
            color: red;
        }
    </style>
</head>


<body>
    <!-- 后代：儿子，孙子，重孙子....... -->
    <p>这是一个p标签</p>
    <div>
        <p>这是div的儿子p</p>
    </div>
</body>