CSS提高篇（复合选择器）
程序员文章站
2024-03-16 20:54:10
...
后代选择器
在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明，外层的标签写在前面，内层的标签写在后面，之间用空格分隔，标签嵌套时内层的标签成为外层标签的后代。
就是首先要符合外层标签然后还符合内层标签，这样的就可以被后代选择器修饰了
看样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div h3{
color: red;
}
</style>
</head>
<body>
<div>
<h3>水果</h3>
<ul>
<li>
<h3>列表中的h3</h3>
香蕉</li>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
<h3>手机品牌</h2>
<ul>
<li>华为</li>
<li>小米</li>
<li>苹果</li>
<li>联想</li>
<li>三星</li>
</ul>
</div>
<h3>div外面的h3标题</h3>
</body>
</html>
看下图，首先红色框 div 里的所有 h3 都会被上面的后代选择器给修饰，所有在 div 范围里的 h3 都会变成红色，下面蓝色框的 h3 ，由于不在 div 里面，所以不会被修饰。
运行效果：
所以这个很好理解吧，继续往下看
交集选择器
由两个选择器直接连接构成，选中二者各自元素范围的交集 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器，选择器之间不能有空格，必须连续书写。
看样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3.aa{
color: red;
}
h3#bb{
color: green;
}
</style>
</head>
<body>
<h3 class="aa">水果</h3>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
<h3>手机品牌</h2>
<ul>
<h3 class="aa">列表里的h3标题</h3>
<li>华为</li>
<li>小米</li>
<li>苹果</li>
<li>联想</li>
<li>三星</li>
</ul>
<div class="aa">class为aa但是不是h3标签的情况</div>
<h3 id="bb">第二部分为id选择器的情况</h3>
</body>
</html>
看下图
红色的框框就是第一部分是便签选择器第二部分是类选择器的情况
绿色的框框就是第一部分是便签选择器第二部分是id选择器的情况
紫色的框框虽然类是aa但是不是h3标签，所以不会被修饰
运行效果：
这个也很好理解吧，就是交集，第一部分符合并且第二部分也符合就是可以被修饰的情况，顾名思义就是取交集。
并集选择器
多个选择器通过逗号连接而成，利用并集选择器同时声明风格相同样式
并集，只要符合其中一种就会被修饰
看样例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3,li{
color: red;
}
</style>
</head>
<body>
<h3>水果</h3>
<ul>
<li>香蕉</li>
<li>苹果</li>
<li>橘子</li>
<li>菠萝</li>
</ul>
<h2>手机品牌</h2>
<ul>
<li>华为</li>
<li>小米</li>
<li>苹果</li>
<li>联想</li>
<li>三星</li>
</ul>
<h3>牛哄哄的柯南</h3>
</body>
</html>
h3,li{
color: red;
}
如下图，所有的只要是 h3 或者是 li 的都会被修饰成红色。
h2 不属于其中的任意一种，所以不会被修饰
运行效果：
效果就是这样，并集，只要是其中的一种就会被标记了，注意多个选择器通过逗号连接而成 。
写作不易，看完如果对你有帮助，感谢点赞支持！
如果你是电脑端，右下角还有"一键三连"，没错点它[哈哈]
加油！
共同努力！
Keafmd