CSS——CSS复合选择器（重中之重 ☆）

呆萌宝儿姐

已于 2023-10-11 15:02:22 修改

阅读量5k

点赞数 2

分类专栏： # CSS 文章标签： css html 交互设计 html5 web

于 2020-06-27 10:03:04 首次发布

本文链接：https://blog.csdn.net/weixin_45525272/article/details/106975766

版权

文章目录

CSS复合选择器

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

记忆技巧：
交集选择器是并且的意思。即…又…的意思

比如：   p.one   选择的是： 类名为 .one  的 段落标签。

用的相对来说比较少，不太建议使用。

交集选择器案例

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div.red {
       /*交集选择器  既是 div  又 叫 red  满足条件 用的较少 特殊情况使用  了解 */
			color: red;
		}
		
	</style>
</head>
<body>
	<div>交集选择器</div>
	<div>交集选择器</div>
	<div class="red">交集选择器</div>
	<p>交集选择器</p>
	<p>交集选择器</p>
	<p>交集选择器</p>
	<p class="red">交集选择器</p>
</body>
</html>

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。
在这里插入图片描述
记忆技巧：

并集选择器和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 这三个选择器都会执行颜色为红色。  通常用于集体声明。

并集选择器案例

 <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
    /*1. 需求 吧 div p span 改为红色*/
    div, p, span {
        /*并集选择器  用逗号隔开  , 代表  和  集