例如:
div > p.some_class {
/* Some declarations */
}
这个>
标志到底是什么意思?
例如:
div > p.some_class {
/* Some declarations */
}
这个>
标志到底是什么意思?
>
(大于号)是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>
输出:
(子选择器)在css2中引入。div p {}选择div元素之后的所有p个元素,而div> p仅选择子p个元素,而不选择大子,大子等等。
<style>
div p{ color:red } /* match both p*/
div > p{ color:blue } /* match only first p*/
</style>
<div>
<p>para tag, child and decedent of p.</p>
<ul>
<li>
<p>para inside list. </p>
</li>
</ul>
</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>
的CSS
div > p.some_class{
color:red;
}
<p>
与之在一起的所有直接子代.some_class
都会将样式应用于它们。
p
具有class的所有标签some_class
都是标签的直接子级div
。
它匹配
p
与类元素some_class
是直接下div
。