写点什么

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

作者:翼同学
  • 2022 年 8 月 29 日
    广东
  • 本文字数:1734 字

    阅读完需:约 6 分钟

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

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>
复制代码



🌱子选择器


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


子选择器语法如下:


元素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>
复制代码


效果如下:



备注:<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>
复制代码


效果如下:



💡通用兄弟选择器


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


语法如下:


元素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>
复制代码


效果如下:



4、写在最后


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

发布于: 刚刚阅读数: 3
用户头像

翼同学

关注

知行合一 2022.08.02 加入

@珠海科技学院

评论

发布
暂无评论
【CSS】你还记得组合选择器怎么用吗?_前端_翼同学_InfoQ写作社区