我可以在哪里使用+和＆gt;在CSS？

Question

这可能是一个基本问题，但对我来说，在CSS中使用+或>的地方仍然令人困惑。

我看到很多选择器，例如li > a或div + span等，但我不确定它们的区别是什么以及何时使用它们？

Answer 1

＆gt; 符号表示选择直接后代

示例：

<强> CSS

div > ul {
   list-style: none;
}

<强> HTML 这里的风格适用于<ul>

<div>
  <ul>
  </ul>
</div>

+ 符号表示选择相邻的兄弟

示例：

<强> CSS

p + p
{
   font-weight: bold;
} 

<强> HTML 这里的风格适用于后者<p>

<div>
   <p></p>
   <p></p>
</div>

Answer 2

选择器在W3 CSS spec中得到了广泛的解释，但这里有一个摘要：

即时子选择器

>选择器是immediate child selector。在您的示例li > a中，规则会选择<a>元素作为<li>元素的直接子元素。{/ p>

规则将在此示例中选择锚点：

<ul>
   <li><a href="#">An anchor</a></li>
</ul>

相邻的兄弟选择器

+选择器是adjacent sibling selector。在您的示例div + span中，规则会选择紧跟<span>元素之前的任何<div>元素，以及它们共享同一父元素的位置。

在这种情况下将选择span元素：

<article>
   <div>A preceding div element</div>
   <span>This span would be selected</span>
</article>

Answer 3

>是直接子选择器。在li > a的示例中，这只会选择<a> 直接后代的<li>个标记。

+表示所选元素的兄弟姐妹。在您的示例中，div + span会选择<span>旁边的任何<div>（使用相同的父级）。

Answer 4

li > a只会选择a元素作为li元素的直接后代。 div + span只会选择跟随span元素的div元素。

请阅读@bažmegakapa的链接：http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Answer 5

我不确定+号但是＆gt;登录css意味着直接的孩子，请考虑这个

div > h1 { color: red; }

这将设置所有h1标签，这些标签是div的直接子项。

<h1>BLAH</h1>
<div>
    <h1>BLAH</h1>
</div>

在这种情况下，第一个h1将保持独立，第二个因为它是div标签的直接子项将是红色。