CSS之选择器（二）复合选择器

已于 2022-05-11 22:35:42 修改
阅读量522 收藏 2
点赞数 2
分类专栏： web 文章标签： html css3 前端 html5 css
于 2022-05-07 16:40:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46675014/article/details/124631367
版权

CSS选择器

        上节谈了一些基础选择器用来选择目标元素标签，可在实际开发中，并不能满足编程人员的所有需求，因此，为了更加精准的选择目标元素标签，复合选择器的学习必不可少！

2、复合选择器

复合选择器：由两个或多个基础选择器通过不同的方式组合而成的选择器。 

没有css样式的html代码及效果图

<!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>CSS复合选择器</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
    <p id="title">我爱这土地</p>
    <p id="autor">艾青</p>
    <div id="content">
        <div class="part1">
            <p class="first">假如我是一只鸟，</p>
            <p>我也就应用嘶哑的喉咙歌唱：</p>
            <p>这被暴风雨所打击的土地，</p>
            <p>这永远汹涌着我们的悲愤的河流，</p>
            <p>这无止息地吹刮着的激怒的风，</p>
            <p>和那来自林间的无比温柔的黎明……</p>
        </div>
        <div class="part2">
            <p>——然后我死了，</p>
            <p>连羽毛也腐烂在土地里面。</p>
            <p>为什么我的眼里常含泪水？</p>
            <p class="last">因为我对这土地爱得深沉……</p>
        </div>
    </div>
</body>
</html>

af05899e9e5c4a529f94251a9b624e66.png

 下面使用复合选择器来修改样式

1、交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器或id选择器，连写在一起，不能有空格或其他符号隔开。

语法：

        标签选择器class(id)选择器{}

CSS代码

/* 交集选择器
选择标题和作者修改样式
标题：字体：微软雅黑；字号：24像素；加粗 
作者：字体：微软雅黑；字号：20像素；加粗*/
p#title {
  font-family: "微软雅黑";
  font-size: 24px;
  font-weight: bold;
}

p#autor {
  font-family: "微软雅黑";
  font-size: 20px;
  font-weight: bold;
}

代码效果 

 

3aabe091e55d4b98a9ed13acf67193f2.png

2、并集选择器

并集选择器是使用多个选择器选择多个标签使用相同样式，选择器之间用逗号隔开

语法：

        选择器1，选择器2，选择器3{}

CSS代码

/* 交集选择器
选择标题和作者修改样式
标题：字体：微软雅黑；字号：24像素；加粗 
作者：字体：微软雅黑；字号：20像素；加粗*/
p#title {
  font-family: "微软雅黑";
  font-size: 24px;
  font-weight: bold;
}

p#autor {
  font-family: "微软雅黑";
  font-size: 20px;
  font-weight: bold;
}

/* 通过并集选择器修改内容样式
字体：楷体；字号：18像素； */
.part1,.part2{
  font-family: "楷体";
  font-size: 18px;
}

 代码效果

5ea57cf44a2a496a8eb0871ba1599e5d.png

 

3、子元素选择器

子元素选择器是选择作为某元素子元素的元素，即通过父元素选择子元素，元素之间用 > 号隔开

语法：

        父元素>子元素{}

CSS代码

/* 交集选择器
选择标题和作者修改样式
标题：字体：微软雅黑；字号：24像素；加粗 
作者：字体：微软雅黑；字号：20像素；加粗*/
p#title {
  font-family: "微软雅黑";
  font-size: 24px;
  font-weight: bold;
}

p#autor {
  font-family: "微软雅黑";
  font-size: 20px;
  font-weight: bold;
}

/* 通过并集选择器修改内容样式
字体：楷体；字号：18像素； */
.part1,.part2{
  font-family: "楷体";
  font-size: 18px;
}

/* 通过子元素选择器修改首句样式
首句：字体颜色：blue；加粗 */
.part1>.first{
  color: blue;
  font-weight: bold;
}

 代码效果 

9013abe559f640939d6cf956d580e9f4.png

  

4、后代选择器

 

后代选择器是选择作为某元素后代元素的元素，即通过祖先元素选择后代元素，元素之间用空格隔开

语法：

        祖先元素  后代元素{} 

CSS代码

/* 交集选择器
选择标题和作者修改样式
标题：字体：微软雅黑；字号：24像素；加粗 
作者：字体：微软雅黑；字号：20像素；加粗*/
p#title {
  font-family: "微软雅黑";
  font-size: 24px;
  font-weight: bold;
}

p#autor {
  font-family: "微软雅黑";
  font-size: 20px;
  font-weight: bold;
}

/* 通过并集选择器修改内容样式
字体：楷体；字号：18像素； */
.part1,.part2{
  font-family: "楷体";
  font-size: 18px;
}

/* 通过子元素选择器修改首句样式
首句：字体颜色：blue；加粗 */
.part1>.first{
  color: blue;
  font-weight: bold;
}

/* 通过后代选择器修改末句样式
末句：字体颜色：红色；加粗 */
#content .last{
  color: red;
  font-weight: bold;
}

 代码效果

f4d164f370de441ea65476dafc9b12fb.png

  

以上就是复合选择器的使用方法和代码展示，下面小结一下复合选择器，如下表

复合选择器
选择器示例示例说明
交集选择器p#title选择所有id值为title的p标签
并集选择器p#title,p#autor选择所有id值为title的p标签和所有id值为autor的p标签
子元素选择器.content>.prat1选择class值为content的标签下的所有class值为part1的子标签
后代选择器.content p选择class值为content的标签下的所有后代p标签

 

 

码、蚁
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css的复合选择器（有案例）
smilehjl
12-11 949
后代选择器又称为包含选择器，可以选择父元素里面子元素。当标签发生嵌套时，内层标签就成为外层标签的后代。在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的，通常用于集体声明. 并集选择器是各选择器通过英文逗号（,）连接而成，任何形式的选择器都可以作为并集选择器的一部分，伪类选择器很多，比如有链接伪类、结构伪类等，所以这里先给大家讲解常用的链接伪类选择器。常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等。
CSS提高篇（复合选择器），【深度思考
最新发布
2401_83946261的博客
03-28 562
编程基础的初级开发者，计算机科学专业的学生，以及平时没怎么利用过数据结构与算法的开发人员希望复习这些概念为下次技术面试做准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】准备。或者想学习一些计算机科学的基本概念，以优化代码，提高编程技能。这份笔记都是可以作为参考的。CodeChina开源项目：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
【前端 - CSS】第 15 课 - 复合选择器
深入挖掘，筑基为先；知其然，知其所以然。
06-14 1088
在 CSS 中，复杂选择器允许通过组合多个选择器来选择具有特定层级关系的元素。这样可以更精确地定位和样式化页面上的特定元素，增强样式的灵活性和可重用性。
【CSS】CSS 复合选择器 ③ ( 并集选择器 | 并集选择器与后代选择器示例 )
让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 )
03-05 2777
一、并集选择器 1、语法说明 2、代码示例 二、并集选择器与后代选择器示例 1、添加注释 2、HTML 结构 3、后代选择器 1 4、后代选择器 2 5、并集选择器 6、完整代码示例 7、显示效果
前端基础：HTML+CSS3笔记 （四）CSS选择器
qq_38803978的博客
10-23 298
先看一个CSS选择器的样例： 1.CSS基础选择器 1.1CSS选择器是什么？ CSS选择器就是我们根据需求把我们想要的标签选择出来。简而言之，选择器就是选择标签用的。 例如上图CSS选择器做了两件事： ①. 找到所有的h1标签 ②. 给找到的所有标签设置样式，比如上面将颜色设置为红色，字体大小设置为红色 1.2选择器分类 选择器分为基础选择器和复合选择器 选择器分类 作用 包括 基础选择器 基础选择器是由单个选择器组成的 基础选择器又包括：标签选择器、类选择器、id 选择器和通配符
CSS复合选择器使用介绍
09-25
CSS复合选择器包括子选择器、相邻选择器、包含选择器、多层选择器嵌套、属性选择器、伪选择器和伪元素选择器，以上具体的使用如下，感兴趣的朋友可以学习下
【CSS基础学习】复杂选择器
01-08
文章目录CSS第二课-复杂选择器群组选择器属性选择器根据属性名查找元素根据属性值精确查找多属性选择器根据属性值近似查找根据标签查找派生选择器后代选择器子元素选择器相邻兄弟选择器 CSS第二课-复杂选择器 群组...
Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt
07-30
1.复合选择器 （1）后代选择器（包含选择器 重要） 语法： 元素1 元素2 {样式声明} 选择器1 选择器2{ 属性：属性值 } 元素1和元素2用空格隔开 元素1父亲 元素2后代 最终改变的是后代（元素2）的样式 ...
CSS选择器到底有哪些？CSS笔记（一）
01-20
文章目录CSS简介CSS样式编写1、内联样式2、内部样式3、外部样式CSS语法选择器常用的选择器元素选择器id选择器类选择器选择器分组（并集选择器）通配选择器复合选择器（交集选择器）后代元素选择器子元素选择器伪类...
7.复合选择器
potato123232的博客
02-23 1295
之前我们提到过选择器由基础选择器与复合选择器构成，现在我们说一下复合选择器 复合选择器是将两个或更多个基础选择器复合到一起，这样选择起来更方便，复合选择器包含后代选择器，子选择器，并集选择器，伪类选择器等，常用的就是我们提到的这四个 目录 1后代选择器 2子选择器 3并集选择器 4伪类选择器 4.1链接伪类选择器 4.2focus 伪类选择器 1后代选择器 后代选择器也叫包含选择器，它可以选择父元素里面的子元素 我们当前有一个有序列表与一个无需列表，里面都有.........
css定义合并书写符,在css的定义中，有多个选择符的样式相同时，可以合并书写，选择符间应该用分隔...
weixin_29216049的博客
08-03 541
在写css代码的时候，对于缩进、断行、空格，每个人有每个人的书写习惯。在经过不断实践后，我决定采用下面这样的书写样式：selector1,selector2 {property:value; border:1px solid #ccc;}当使用联合定义时，我通常将每个选择器单独写一行，这样方便在css文件中找到它们。在最后一个选择器和大括号{之间加一个空格，每个定义也单独写一行，分号直接在属性值...
5. 前端基础--CSS复合选择器
weixin_45267102的博客
10-18 165
CSS选择器分为 基础选择器 和 复合选择器 ，但是基础选择器不能满足我们实际开发中，快速高效的选择标签。 目的是为了可以选择更准确更精细的目标元素标签。 复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的。
复合选择器之并集选择器
weixin_47481102的博客
04-24 4924
在 CSS 中，可以根据选择器的类型把选择器分为基础选择器和复合选择器，复合选择器是建立在基础选择器之上，对基本选择器进行组合形成的。 1、复合选择器可以更准确、更高效的选择目标元素（标签） 2、复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的 3、常用的复合选择器包括：后代选择器、子选择器、并集选择器、伪类选择器等等
css的选择器-逗号、空格分隔和连写的区别
Alive_m的博客
10-30 2194
css的选择器-逗号、空格分隔和连写的区别
css交集选择器和后代选择器
m0_47310515的博客
08-06 1198
交集选择器和后代选择器的区别 这里让我们先思考每个选择器的概念，有时候尽管使用不同的选择器时，他们产生的效果可能相同，但是我们应该更好的利用每个选择器的特点来简化css代码。 1.让我们来看一下交集选择器 ​ 它的语法是这样的 ​ 选择器1选择器2 { ​ ​ color：red; ​ } ​ 两个选择器紧紧挨着，中间没有空格 ​ 可以是任意的选择器组合，表示着同级别之间的关系 给所有选择器选中的标签中, 相交的那部分标签设置属性! 这里面，我使用交集选择器的效果和后代选择器的效果相同，但是我错
CSS选择器
weixin_46222426的博客
05-14 1116
一：组合选择器 选择器的作用：方便找到HTML中的元素 1：分组选择器：把多个相同配置的CSS放在同一个组里面，简化CSS书写，中间是 ， 号 #id,.class{ color:skyblue; } 2：后代选择器：某一个标签下面的全部子标签（子子孙孙）都能被响应，中间加空格 例： /* div标签下的所有p标签，子子孙孙都会被响应*/ div p{ color:skyblue; } 3：子代选择器：某一个标签下的子标签，中间是 > 号 /*div下面子标签为p标签的元素*/ div&g
笔记｜使用CSS选择器（复合选择器）
GUIDM的博客
04-15 871
1、复合选择器 组合使用不同的选择器可以匹配更特定的元素。 1.1、并集选择器 创建由逗号分隔的多个选择器可以将样式应用到单个选择器匹配的所有元素。 eg： ​<style type="text/css"> ​​a, [lang|="en"] {​​ border: thin black solid;​​ padding: 4px;​​ }​​ </style>​​ 指定了一个类型选择器a和一个属性选择器[lang｜='en']。 ⚠️可以根据自己...
实训打卡第三天
m0_57715248的博客
11-18 104
实训打卡
CSS复合选择器p.father strong{color:black;}的优先级为 。
06-10
CSS 选择器的优先级是根据一定规则计算出来的，可以用一个简单的公式来表示： ``` 优先级 = a * 1000 + b * 100 + c * 10 + d ``` 其中，`a` 代表内联样式，`b` 代表ID选择器，`c` 代表类选择器、属性选择器和伪类，`d` 代表元素选择器、伪元素选择器和通配符。 对于复合选择器 `p.father strong{color:black;}`，它由两个选择器组成，其中 `p.father` 是类选择器和元素选择器的结合，`strong` 是元素选择器，因此它的优先级为： ``` 10 * c + 1 * d = 10 * 2 + 1 * 1 = 21 ``` 比如说，如果有一个内联样式 `style="color:red;"`，那么它的优先级为： ``` 1 * a + 0 * b + 0 * c + 0 * d = 1000 ``` 因此，对于这个复合选择器 `p.father strong{color:black;}`，它的优先级为 `21`。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值