关系选择器

2023年02月14日

柏拉文

越努力，越幸运

一、后代选择器

---

后代选择器——典型用单个空格（" "）字符 ——组合两个选择器。选择器利用后代组合符被称作后代选择器。

语法

.box p {
    color: red;
}  

二、子代选择器

---

子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。

语法

ul > li {
    border-top: 5px solid red;
}  

三、邻接兄弟选择器

---

邻接兄弟选择器（+），用来选中恰好处于另一个在继承关系上同级的元素旁边的物件

语法

h1 + p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
}   

四、通用兄弟选择器

---

如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）

语法

h1 ~ p {
    font-weight: bold;
    background-color: #333;
    color: #fff;
    padding: .5em;
}