例如:

div > p.some_class {
  /* Some declarations */
}

>符号到底是什么意思?


当前回答

CSS中的大符号(>)选择器意味着右侧的选择器是左侧选择器的直接后代/子选择器。

一个例子:

article > p { }

意思是只设置文章后面的段落样式。

其他回答

(子选择器)在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选择器

正如其他人提到的,它是一个子选择器。下面是相应的链接。

http://www.w3.org/TR/CSS2/selector.html#child-selectors

CSS中的大符号(>)选择器意味着右侧的选择器是左侧选择器的直接后代/子选择器。

一个例子:

article > p { }

意思是只设置文章后面的段落样式。

所有带有some_class类的p标记,它们是div标记的直接子标记。

>(大于号)是一个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组合器的信息