例如:
div > p.some_class {
/* Some declarations */
}
>符号到底是什么意思?
当前回答
它匹配div下面的类some_class中的p个元素。
其他回答
所有带有some_class类的p标记，它们是div标记的直接子标记。
(子选择器)在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>
有关CSS Ce[lectors]及其使用的更多信息，请查看我的博客， CSS选择器和css3选择器
>(大于号)是一个CSS组合器。
组合子解释了选择器之间的关系。
一个CSS选择器可以包含多个简单的选择器。在简单的选择器之间，我们可以包含一个组合子。
在CSS3中有四种不同的组合子:
后代选择器(空格) 子selector (>) 相邻兄弟选择器(+) 通用兄弟选择器(~)
注意:<在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>
输出:
更多关于CSS组合器的信息
CSS中的大符号(>)选择器意味着右侧的选择器是左侧选择器的直接后代/子选择器。
一个例子:
article > p { }
意思是只设置文章后面的段落样式。
html
<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>的直接子元素都将获得应用于它们的样式。
