【CSS】你还记得组合选择器怎么用吗？

翼同学
546 阅读4分钟

我正在参与掘金创作者训练营第5期，点击了解活动详情

1️⃣前言

今天的笔记内容是：

  • 并集选择器以及组合选择器

2️⃣并集选择器

  • 问：并集选择器的用途是什么？
  • 答：可以实现集体样式声明。

并集选择器就是将需要设置相同样式的HTML元素给分组选取出来，通过并集选择器的形式为它们定义相同的样式。

注意，任何形式的选择器都可以作为并集选择器的一部分。

语法如下：

元素1,
元素2,
元素3 {
    样式声明...;
}

可以看出，并集选择器的语法是各个选择器之间用逗号隔开（我喜欢整体竖着写），最后一个选择器不需要加逗号。

通过并集选择器可以有效减少重复代码量。

举个例子，看下列代码：

div {
    color: skyblue;
    text-align: center;
}
h1 {
    color: skyblue;
    text-align: center;
}
p {
    color: skyblue;
    text-align: center;
}

使用并集选择器可以写成下面代码：

div,
h1,
p {
    color: skyblue;
    text-align: center;
}

3️⃣组合选择器

组合选择器一般可以分为四种，分别是后代选择器、子选择器、相邻兄弟选择器和通用兄弟选择器。

还记得具体的细节嘛？来复习一下。

🌳后代选择器

后代选择器又称包含选择器。

当标签有嵌套关系时，内层标签就是外层标签的后代。

我们通过后代选择器来可以选择标签内层中的子元素。

具体语法如下：

元素1 元素2 { 
	样式声明
}

如上述代码所示：

将父标签也就是元素1写在外头，子代标签写在后面，中间用空格隔开。最终选择的是元素2。

注意：元素1和元素2可以是任意基础选择器，只要是元素2是元素1的后代就行。

<!DOCTYPE html>
<html>
<head>
    <style>
        div p { color: skyblue;}
    </style>
</head>
<body>
    <div>
        <p>段落一</p>
        <p>段落二</p>
        <section>
            <p>段落三</p>
        </section>
        <p>段落四</p>
        <p>段落五</p>
    </div>
        <p>段落六</p>
        <p>段落七</p>
</body>
</html>

image.png

🌱子选择器

子元素选择器用于选择距离某元素最近的一级子元素。简单的说，子选择器就是用于匹配指定标签的子元素的所有元素。

子选择器语法如下：

元素1 > 元素2 {
	样式声明
}

上述代码表示元素1是父级标签，元素2是子级标签，最终选择的是元素2，并且元素2必须是嵌套在元素1里头的距离元素1最近的元素。而且在子选择器中，元素之间用大于号>隔开。

举个例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        div > p { color: skyblue;}
    </style>
</head>
<body>
    <div>
        <p>段落一</p>
        <p>段落二</p>
        <section>
            <p>段落三</p>
        </section>
        <p>段落四</p>
        <p>段落五</p>
    </div>
        <p>段落六</p>
        <p>段落七</p>
</body>
</html>

效果如下：

image.png

备注：<section> 标签用于定义HTML文档中的章节、页眉、页脚等区段。

✨相邻兄弟选择器

相邻兄弟选择器就是用于匹配与指定标签相邻的同级标签。

语法如下：

元素1 + 元素2 { 样式声明; }

上述语法的意思是，元素1和元素2是相邻兄弟的关系，二者的共同点在于具有相同的父级标签。此时用加号+将二者相连起来。

因此，“相邻兄弟”可以理解为“紧随其后的一个同级元素”。

举个例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        div + p { color: skyblue;}
    </style>
</head>
<body>
    <p>段落一</p>
    <p>段落二</p>
    <div>
        <p>段落三</p>
        <p>段落四</p>
    </div>
    <p>段落五</p>
    <p>段落六</p>
</body>
</html>

效果如下：

image.png

💡通用兄弟选择器

与相邻兄弟选择器不同的是，通用兄弟选择器匹配了与指定标签同级的所有标签，注意，是所有同级的标签。

语法如下：

元素1 ~ 元素2 { 样式声明; }

在上述语法中，用~号将两个元素相连起来，表示元素1和元素2是兄弟关系，最终选择的是元素2，整个语法表示将和元素1同级的所有元素2都选择出来进行样式修改。

举个例子：

<!DOCTYPE html>
<html>
<head>
    <style>
        div ~ p { color: skyblue;}
    </style>
</head>
<body>
    <p>段落一</p>
    <p>段落二</p>
    <div>
        <p>段落三</p>
        <p>段落四</p>
    </div>
    <p>段落五</p>
    <p>段落六</p>
    <section><p>段落七</p></section>
</body>
</html>

效果如下：

image.png

📌总结

最后总结一下：

符号含义
空格后代选择器，用于匹配任意后代元素
>子选择器，用于匹配子级元素，而不是任意的后代元素
+相邻兄弟选择器，用于匹配紧跟其后的一个同级元素
~通用兄弟选择器，用于匹配紧跟其后的所有同级元素

4️⃣写在最后

好了，今天的笔记就到这里。

avatar
文章
阅读
粉丝