Combinators
关系选择器
后代选择器
The descendant combinator — typically represented by a single space (" ") 后代选择器——典型用单个空格(" ")字符 例如:
.box p {
color: red;
}
只会匹配处于带有.box
类的元素里面的<p>
元素。
子代关系选择器
The child combinator (>
) is placed between two CSS selectors. It matches only those elements matched by the second selector that are the direct children of elements matched by the first.
子代关系选择器是个大于号(>
),只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配。例如,只选中作为<article>
的直接子元素的<p>
元素:
下个示例中,我们弄了个有序列表,内嵌于另一个无序列表里面。我用子代关系选择器,只选中为<ul>
的直接子元素的<li>
元素,给了它们一个顶端边框。
如果你移去指定子代选择器的>
的话,你最后得到的是后代选择器,所有的<li>
会有个红色的边框。
ul > li {
border-top: 5px solid red;
}
<ul>
<li>Unordered item</li>
<li>Unordered item
<ol>
<li>Item 1</li>
<li>Item 2</li>
</ol>
</li>
</ul>
参考:关系选择器 - 学习 Web 开发 | MDN (mozilla.org)
邻接兄弟
Adjacent sibling combinator
邻接兄弟选择器(+
)用来选中恰好处于另一个在继承关系上同级的元素旁边的物件。例如,选中所有紧随<p>
元素之后的<img>
元素:
p + img
常见的使用场景是,改变紧跟着一个标题的段的某些表现方面,就像是我下面的示例那样。这里我们寻找一个紧挨<h1>
的段,然后样式化它。
h1 + p {
font-weight: bold;
background-color: #333;
color: #fff;
padding: .5em;
}
<article>
<h1>A heading</h1>
<p>Veggies es bonus vobis, proinde vos postulo essum magis kohlrabi welsh onion daikon amaranth tatsoi tomatillo
melon azuki bean garlic.</p>
<p>Gumbo beet greens corn soko endive gumbo gourd. Parsley shallot courgette tatsoi pea sprouts fava bean collard
greens dandelion okra wakame tomato. Dandelion cucumber earthnut pea peanut soko zucchini.</p>
</article>
如果你往<h1>
和<p>
之间插入其他的某个元素,例如<h2>
,那么就不生效了。
通用兄弟
General sibling combinator
如果你想选中一个元素的兄弟元素,即使它们不直接相邻,你还是可以使用通用兄弟关系选择器(~
)。要选中所有的<p>
元素后_任何地方_的<img>
元素,我们会这样做:
p ~ img
在下面的示例中,我们选中了所有的 <h1>
之后的<p>
元素,虽然文档中还有个 <div>
,其后的<p>
还是被选中了。
h1 ~ p {
font-weight: bold;
background-color: #333;
color: #fff;
padding: .5em;
}
<article>
<h1>A heading</h1>
<p>I am a paragraph.</p>
<div>I am a div</div>
<p>I am another paragraph.</p>
</article>