一：css组合选择器
特性:每个选择器位可以为任意基本选择器或选择器组合
选择器分为以下几类：
群组选择器，子代（后代）选择器，相邻（兄弟）选择器，交集选择器，多类名选择器
1、群组选择器：
- 一次性控制多个选择器
- 选择器之间以 ，（逗号） 隔开，每一个选择器位均可以任意合法选择器或选择器组合
2、子代（后代）选择器：
- 一次性控制一个选择器（逻辑最后的那个选择器），前置位的选择器为修饰性选择器
- 每一个选择器位均可以 为任意合法选择器或选择器组合
- 子代选择器必须为一个父级嵌套关系，后代选择器可以为一级或多级父子嵌套关系
3、相邻（兄弟）选择器：
- 一次性控制一个选择器（逻辑最后的那个选择器），前置位的选择器为修饰性选择器
- 每一个选择器位均可以为任意合法选择器或选择器组合
- 相邻选择器必须为直接相邻关系，兄弟选择器可以为直接相邻或间接相邻关系
4、交集选择器：
- 既可以是选择器1，也可以是选择器2
5、多类名选择器：
- 例：<div class="d1 d2 d3">红红火火恍恍惚惚</div>
- 精确查找class，更好的确认类名，详见下列代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>组合选择器</title>
<style type="text/css">
/*组合选择器*/
/*特性:每个选择器位可以为任意基本选择器或选择器组合*/
/*群组选择器: ,隔开
控制多个*/
div, .s, section {
color: red;
}
/*子代选择器: >连接*/
body > div {
color: orange;
}
/*div > a {
text-decoration: none;
}*/
/*后代选择器: 空格连接*/
/*包含子代选择器*/
body a {
text-decoration: none;
}
/*相邻选择器: +连接*/
span + section {
background-color: pink;
}
/*兄弟选择器: ~连接*/
/*包含相邻选择器*/
div ~ section {
background-color: brown;
}
/*交集选择器*/
/*即是选择器1又是选择器2*/
i.s {
color: yellow;
}
/*多类名选择器*/
.d1 {
color: blue;
}
.d1.d2 {
color: tan;
}
.d1.d2.d3 {
color: #780;
}
</style>
</head>
<body>
<!-- div{div}+span{span}+section{section} -->
<div>div</div>
<span class="s">span</span>
<section>section</section>
<div>
<a href="">a标签</a>
</div>
<i class="s">iiii</i>
<div class="d1 d2 d3">呵呵</div>
</body>
</html>
五种选择器
二：组合选择器优先级
三：属性选择器
原文地址：https://www.cnblogs.com/zedong/p/9687487.html
时间： 2024-09-30 03:55:23