css选择器(通配符、（元素、类、id）、后代（子代、所有后代）、兄弟（相邻兄弟、所有兄弟）、属性（属性、指定值的属性）、交集并集)

最新推荐文章于 2024-05-28 11:31:46 发布

做一个有温度和深度的程序猿

最新推荐文章于 2024-05-28 11:31:46 发布

阅读量470

点赞数

文章标签： css 前端 html

本文链接：https://blog.csdn.net/m0_59755550/article/details/126796493

版权

<!DOCTYPE html>
<html lang="en">

<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>选择器总结</title>
    <style>
        /* 1. 简单 元素 类 id（id是唯一） */

        /* 元素 */
        div {
            background-color: pink;
        }

        /* 类 */
        .box2 {
            background-color: yellow;
        }

        /* id */
        #id {
            background-color: green;
        }

        /* 2. 属性 */

        /* 选择属性 */
        [title] {
            background-color: yellow;
        }

        /* 选择指定值的属性 */
        [title=span] {
            background-color: green;
        }

        /* 3. 后代 */

        /* 选择所有后代 */
        .father span {
            background-color: #f00;
        }

        /* 选择子代 */
        .father>span {
            background-color: green;
        }

        /* 4. 交集 并集 */

        /* 交集 */
        div.box3 {
            background-color: yellow;
        }

        /* 并集 */
        div.box3,
        div.box4 {
            background-color: green;
        }

        /* 5. 兄弟 */

        /* 相邻兄弟 */
        #box5.brother+div {
            background-color: pink;
        }
        
        /* 全部兄弟 */
        #box5.brother~div{
            background-color: green;
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- 简单 -->
        <div>元素</div>
        <div class="box2">类</div>
        <div id="id">id</div>

        <!-- 属性 -->
        <span title="title">title</span>
        <span title="span">title=span</span>

        <!-- 后代 domTree -->
        <div class="father">
            <span>span1</span>
            <div><span>span2</span></div>
            <div><span>span3</span></div>
        </div>

        <!-- 交集 并集 -->
        <div class="box3">.</div>
        <div class="box4">,</div>

        <!-- 兄弟 -->
        <div id="box5">
            <div class="brother">1</div>
            <div>2 相邻</div>
            <div>3</div>
            <div>4</div>
        </div>

    </div>
</body>

</html>

复制代码在本地调试即可学习到这些内容：

包括以下内容

1. 利用*选择出所有元素

2. 利用元素、类名、id 选择出指定的元素

3. 利用 [属性名]、[属性名=属性值] 选择指定的元素

4. 利用 “空格”、“>” 选择子代或者所有后代的元素

5. 利用 “+”、“~” 选择相邻兄弟或者所有兄弟的元素

6. 利用紧贴、“，” 选择交集或者并集的元素

css选择器很重要，大家要好好学

通配符

简单

属性

后代

兄弟

交集并集

伪类常见的伪类

动态伪类

做一个有温度和深度的程序猿

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css选择器(通配符、（元素、类、id）、后代（子代、所有后代）、兄弟（相邻兄弟、所有兄弟）、属性（属性、指定值的属性）、交集并集)

3. 利用 [属性名]、[属性名=属性值] 选择指定的元素。5. 利用 “+”、“~” 选择相邻兄弟或者所有兄弟的元素。4. 利用 “空格”、“>” 选择子代或者所有后代的元素。6. 利用紧贴、“，” 选择交集或者并集的元素。2. 利用元素、类名、id 选择出指定的元素。css选择器很重要，大家要好好学。1. 利用*选择出所有元素。
复制链接

扫一扫