CSS3 组合器 （六）

CSS3 组合器 （六）

标签（空格分隔）： 前端学习

---

关系选择器

1.后代选择器，典型***使用单个空格***组合两个选择器例如：

.box p {
    color: red;
}
<div class="box"><p>box中显示红色</p></div>
<p>不显示红色</p>

2.子代关系选择器
子代选择器是">"符号，只会在选择器中直接子元素的时候匹配。继承关系上更远的后代不会被匹配，例如只选中作为<article>的直接子元素的<p>元素：article > p

3.邻接兄弟选择器
使用符号时"+"，用于选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如选中所有紧跟<p>元素之后的<img>元素:p + img
要注意的是<p>元素和<img>必须是相邻的否则将不会作用

4.通用兄弟选择器
使用符号时"~"，当兄弟元素不相邻时仍然可以作用，与邻接兄弟选择器向对应，要选中<p>元素后任何地方的<img>元素：p ~ img

5.使用关系选择器
组合使用，例如如果我们想选中为<ul>的直接子元素的带有’a’类的列表选项的话，可以使用如下代码：ul > li[class="a"] { }