参考:https://www.w3school.com.cn/,immoc Rosen的UI专栏
后代选择器
用空格分隔的多个选择器组合,语法形式就是:“选择器 A 选择器 B”,表示在A 选择器的后代元素中找到 B 选择器所指的元素(这个范围内的所有后台)
<!-- HTML -->
<div class="root">
<div class="first-child-dev">
<span class="second-child-span">我是第二层的span<span>
<span class="second-child-span">我是第二层的span<span>
<span class="second-child-span">我是第二层的span<span>
</div>
<span class="first-child-span">我是第一层的span</span>
</div>
// CSS:
.root span{
color: red
}
上面的后代选择器就会把 class 为 root元素里面的所有span 元素的字体都改成 红色
TIps: 后台选择器可以叠加使用,如只想让第二层的span变成红色
.root .first-child-dev span {
color: red
}
子元素选择器
子元素选择器和后代选择器类似,也是为选择器限定范围。不同的是子元素选择器只找子元素,而不会把所有的后代都找一遍。它的语法是 “选择器 A> 选择器 B”
<!-- HTML -->
<div class="root">
<div class="first-child-dev">
<span class="second-child-span">我是第二层的span<span>
<span class="second-child-span">我是第二层的span<span>
<span class="second-child-span">我是第二层的span<span>
</div>
<span class="first-child-span">我是第一层的span</span>
</div>
// CSS:
.root > span{
color: red
}
用 “…root > span” 这个选择器就会把 .root元素里面的 .first-child-span元素的字体变成灰色,但不会对 .first-child-dev元素下的 span 元素产生影响。
Tips:子元素选择器也是可以叠加使用,还按上面的例子,如只想对first-child-dev中的span起作用
.root > .first-child-dev span{
color: red
}
兄弟选择器
在 CSS 中,还有一种选择器是用来选取同级元素的,叫做兄弟选择器。兄弟选择器有两种,一种是相邻兄弟选择器,另外一种是通用兄弟选择器
1.相邻兄弟选择器
相邻兄弟选择器是用来选取某个元素向下紧邻的兄弟元素,它的语法是 “选择器 A + 选择器 B”,其实就是对选择器 B 加上 “紧邻着选择器 A” 的限制
<!-- HTML -->
<div class="root">
<div class="first-child-dev">
<span class="second-child-span">我是第二层的span<span>
<h1>我是第二层的h1</h1>
<span class="second-child-span">我是第二层的span<span>
<span class="second-child-span">我是第二层的span<span>
</div>
<span class="first-child-span">我是第一层的span</span>
</div>
// CSS:
h1 + span {
color: red
}
这样只会让紧邻h1下面的一个span变成红色,上面的span不会起作用
补充一个例子:
<div>
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
</div>
li + li {font-weight:bold;}
上面这个选择器只会把列表中的itme2和item3列表项变为粗体。第一个列表项不受影响。
item2: item1向下紧邻的item2
item3: item2向下紧邻的item3
2.通用兄弟选择器
通用兄弟选择器会匹配选择器 A 指定元素后面的所有符合选择器 B 规则的元素,它的语法是 "选择器 A ~ 选择器 B"
<!-- HTML -->
<div class="root">
<div class="first-child-dev">
<span class="second-child-span">我是第二层的span<span>
<h1>我是第二层的h1</h1>
<span class="second-child-span">我是第二层的span<span>
<span class="second-child-span">我是第二层的span<span>
</div>
<span class="first-child-span">我是第一层的span</span>
</div>
// CSS:
h1 + span {
color: red
}
上面的选择器会选中和 h1 元素同级且在 h1 元素后面出现的 span 元素表现成红色字体的样式
结合其他选择器
html > body table + ul {margin-top:20px;}
这个选择器解释为:选择紧接在 table 元素后出现的所有兄弟 ul 元素,该 table 元素包含在一个 body 元素中,body 元素本身是 html 元素的子元素。
TIps:兄弟选择器(包括相邻兄弟选择器和通用兄弟选择器)中都是只能向后选择,如果需要向前选择,就只能给前面的元素指定上 class,再用类选择器来实现了
交集选择器
交集选择器是为了找两个或多个选择器的交集,用法就是把两个选择器放在一起,形式如 “选择器 A 选择器 B”,中间不需要加空格或者其他符号。交集选择器最主要的作用是在限定范围内标识特殊的样式。比如:
<!-- HTML -->
<div class="menu">
<a class="menu-item">菜单1</a>
<a class="menu-item active">菜单2</a>
<a class="menu-item">菜单3</a>
<a class="menu-item">菜单4</a>
</div>
// CSS
.menu-item{
background: #ccc;
color: #000;
}
.menu-item.active{
background: #aaa;
color: #fff;
}
通过 .menu-item 给所有菜单元素一个基础样式,然后通过交集选择器 .menu-item.active 给当前活跃的菜单选项一个特殊的标记
并集选择器
并集选择器是把选择器不同但样式相同的 CSS 语法块做合并,它的语法是 “选择器 A, 选择器 B”,表示该样式对选择器 A 和选择器 B 所选择的元素都生效
// CSS
h1{
margin: 0;
padding: 0;
}
h2{
margin: 0;
padding: 0;
}
h3{
margin: 0;
padding: 0;
}
这种写法会占用很多 CSS 代码量,但是可以通过并集选择器来进行简化
h1, h2, h3{
margin: 0;
padding: 0;
}