19

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

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

4

5 回答 5

37

>符号表示选择一个直系后代

例子：

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>
于 2012-04-14T17:30:27.913 回答
6

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

直接子选择器

选择>器是直接子选择器。在您的示例li > a中，该规则将选择<a>作为元素的直接子元素的任何<li>元素。

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

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

相邻兄弟选择器

选择+器是相邻的兄弟选择器。在您的示例div + span中，该规则将选择<span>紧接在一个元素之前的任何<div>元素，并且它们都共享同一个父元素。

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

<article>
   <div>A preceding div element</div>
   <span>This span would be selected</span>
</article>
于 2012-04-14T17:31:18.893 回答
2

是>直接子选择器。在您的示例中，这将li > a仅选择<a>作为.<li>

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

于 2012-04-14T17:30:52.490 回答
0

li > a只会选择a元素的直接后代li元素。div + span只会选择span元素后面的div元素。

在@bažmegakapa 的链接中阅读更多内容：http: //www.w3.org/TR/CSS2/selector.html#pattern-matching

于 2012-04-14T17:30:42.460 回答
-1

我不确定 + 号，但 css 中的 > 号表示直接子级，考虑一下

div > h1 { color: red; }

这将为所有作为 div 直接子级的 h1 标签设置样式。

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

在这种情况下，第一个 h1 将被单独保留，第二个因为它是 div 标签的直接子级，所以将是红色的。

于 2012-04-14T17:31:41.373 回答