例如:
div > p.some_class {
/* Some declarations */
}
>
符号到底是什么意思?
div > p.some_class {
/* Some declarations */
}
>
符号到底是什么意思?
>
是子元素组合器,有时被错误地称为直接后代组合器。1这意味着选择器div > p.some_class
仅匹配直接嵌套在div
内部的.some_class
段落,而不匹配嵌套更深层次的任何段落。这意味着每个匹配div > p.some_class
的元素必然也符合后代组合器(空格)div p.some_class
,所以两者经常会被误解混淆。下面是一个比较子元素组合器和后代组合器的示例:
div > p.some_class {
background: yellow;
}
div p.some_class {
color: red;
}
<div>
<p class="some_class">Some text here</p> <!-- [1] div > p.some_class, div p.some_class -->
<blockquote>
<p class="some_class">More text here</p> <!-- [2] div p.some_class -->
</blockquote>
</div>
哪些选择器匹配哪些元素?
div > p.some_class
和div p.some_class
都匹配
这个p.some_class
直接位于div
内,因此两个元素之间建立了父子关系。由于“子元素”是“后代元素”的一种,任何子元素都被定义为后代元素。因此,两条规则都适用。
仅匹配div p.some_class
这个p.some_class
包含在div
内的blockquote
中,而不是div
本身。虽然这个p.some_class
是div
的后代,但它不是子元素;它是孙子元素。因此,只有带有后代组合器的选择器规则会应用。
1 许多人进一步称其为“直接子元素”或“立即子元素”,但这完全没有必要(并且对我来说非常烦人),因为按定义,子元素本来就是即时的。不存在“间接子元素”这样的东西。
>
(大于号)是CSS选择器的一种组合器。
组合器用来描述选择器之间的关系。
CSS选择器可以包含多个简单选择器,在简单选择器之间,我们可以加上组合器。
CSS3中有四种不同的组合器:
注意:<
在CSS选择器中无效。
例如:
<!DOCTYPE html>
<html>
<head>
<style>
div > p {
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p>Paragraph 1 in the div.</p>
<p>Paragraph 2 in the div.</p>
<span><p>Paragraph 3 in the div.</p></span> <!-- not Child but Descendant -->
</div>
<p>Paragraph 4. Not in a div.</p>
<p>Paragraph 5. Not in a div.</p>
</body>
</html>
输出:
.entry-content > * {"code" }
这样的东西,后面跟着.entry-content {"other code" }
,那么这是什么意思呢?难道.entry-content > *
不包括所有entry-content
的子元素吗? - YCode正如其他人提到的那样,这是一个子选择器。这是相关链接。
它匹配直接位于 div
下的带有类名为 some_class
的 p
元素。
所有class为some_class
的p
标签,它们是div
标签的直接子元素。
div p
选择所有作为 div 元素后代的 p 元素,而 div > p
只选择子级 p 元素,不包括孙子、曾孙等。<style>
div p{ color:red } /* match all p in div */
div > p{ color:blue } /* match only children p of div*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
<p>para tag, child and decedent of p.</p>
</div>
<div>
<p class="some_class">lohrem text (it will be of red color )</p>
<div>
<p class="some_class">lohrem text (it will NOT be of red color)</p>
</div>
<p class="some_class">lohrem text (it will be of red color )</p>
</div>
div > p.some_class{
color:red;
}
.some_class
的 <p>
将应用该样式。CSS中的大于号选择器(>)表示右侧选择器是左侧元素的直接后代/子元素。
例如:
article > p { }
#something a
才是子选择器。 - alex#something a
可能意味着a
是#something
的孙子或曾孙(它不考虑嵌套的深度)。 - BoltClock