CSS选择器之【组合选择器】

最新推荐文章于 2023-02-16 09:40:27 发布

徐小七七

最新推荐文章于 2023-02-16 09:40:27 发布

阅读量522

点赞数

分类专栏： css 选择器文章标签： css

本文链接：https://blog.csdn.net/xustart7720/article/details/73618389

版权

css 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

选择器

2 篇文章 0 订阅

订阅专栏

前言

组合使用不同的选择器可以匹配更特定的元素。有的复合选择器能将目标样式应用到更多元素，有的复合选择器则会锁定更少元素，总之会让你的选择非常具体。复合选择器主要包括：群组选择器、后代选择器、子选择器和同级元素选择器。

一、群组选择器

群组选择器的使用范畴是，多个选择器使用同一个样式或者同一组样式。这在做CSS样式初始化，CSS框架设计以及后期CSS代码优化时会经常使用。多个选择器之间用逗号（,）隔开，其语法形式为：选择器1,选择器2，选择器3 { 定义样式 }；代码示例如下：


<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
    /*群组选择器*/
    span, [title], div {
        color: blue;
    }
    </style>
</head>

<body>
    <div>群组选择器</div>
    <p title="">群组选择器</p>
    <span>群组选择器</span>
</body>

</html>

二、后代选择器

后代选择器是对某元素所嵌套的指定元素进行选择，每个选择符之间用空格进行分割，多个嵌套层次应该以多个空格进行分割（多层嵌套难免会增加选择器带来高权重，这样在处理一些元素的特殊样式的时候会带来些困难，所以在实际开发中我们还是应该避免出现多层嵌套的后代选择器的存在），示例如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
    /*后代选择器*/
    .descendantSelectors span {
        color: red;
    }
    .descendantSelectors div p {
        color: blue;
    }

    </style>
</head>

<body>

<div class="descendantSelectors">
    <div>
        <p>文本内容01</p>
    </div>
    <span>文本内容02</span>
</div>

</body>

</html>

上述示例中可以看到，后代选择器的选择可以是间接后代，也可以是直接后代，其中p为间接后代，span为直接后代，每一代之间使用空格隔开，我们可通过此方式找到更为复杂嵌套下的元素并设置样式。

三、子选择器

子选择器区别与后代选择器的地方就是，后代选择器可以选择嵌套在标签内部任意层级的标签元素，而子选择器只能选择当前标签往内一层的元素，即子选择器只能匹配直接后代，通俗一点，就是只能匹配儿子辈，不能匹配孙子辈。每个选择符之间用“>”进行分割。示例如下：

<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
    /*子选择器*/
    div>p {
        color: red;
    }
    </style>
</head>

<body>
    <div>
        <p>文本内容01</p>
    </div>
</body>

</html>

四、同级元素选择器

该选择器能选定当前选择器同级的其它指定选择器，平时虽使用的不多，但配合伪类选择器经常可以做出一些很有“新意”的效果，也能减少对JavaScript的依赖。同级元素有两种，即“+”和“~”。该选择器的示例我将会用到伪类选择器中的:hover，其作用是当鼠标悬浮在目标上会被触发，具体的会在后续文档中介绍。

【+】同级元素选择器

【~】同级元素选择器

“+”只能选择该选择器相邻的下一个选择器，“~”能选择该选择器后的所有同级选择器，二者同样，我们仅仅只需要将选择器中的 + 替换成 ~ 即可。示例如下：


<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>Example</title>
    <style type="text/css">
        .sender {
            background-color: black;
            width: 50px;
            height: 50px;
            /*设置圆角，50%表示将该元素切割成一个圆*/
            border-radius: 50%;
        }

        /*同级元素选择器‘+’*/
        .sender:hover + .text_1 {
            color: blue;
            /*加粗粗细，bolder为更粗*/
            font-weight: bolder;
        }
        .sender:hover + .text_2 {
            color: blue;
            font-weight: bolder;
        }
    </style>
</head>

<body>
    <div class="sender"></div>
    <p class="text_1">文本内容01</p>
    <p class="text_2">文本内容02</p>
</body>

</html>

这里对上述选择器的写法做一些声明，其中.sender:hover的作用是，首选找到.sende**r类选择器，然后为其设置一个悬浮的伪类选择器（hover）**，后面的+就表示找其对应的同级元素选择器了。运行程序我们可以发现，当鼠标悬浮在黑色圆球上时，第一段文本会做一些样式的变化，第二段文本不会。

徐小七七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS选择器之【组合选择器】

前言组合使用不同的选择器可以匹配更特定的元素。有的复合选择器能将目标样式应用到更多元素，有的复合选择器则会锁定更少元素，总之会让你的选择非常具体。复合选择器主要包括：群组选择器、后代选择器、子选择器和同级元素选择器。一、群组选择器群组选择器的使用范畴是，多个选择器使用同一个样式或者同一组样式。这在做CSS样式初始化，CSS框架设计以及后期CSS代码优化时会经常使用。多个选择器之间用逗号（,）隔开，其
复制链接

扫一扫