logo标签列表

在CSS中，我可以在哪些地方使用+和>符号？

csscss-selectors
19

这可能是一个基础问题，但对我而言在CSS中何时可以使用+或>仍然很困惑。

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

请阅读手册：http://www.w3.org/TR/CSS2/selector.html#pattern-matching - E > F ：子选择器。匹配任何作为元素 E 的直接子元素的 F 元素。- E + F ：相邻兄弟选择器。匹配任何在兄弟元素 E 之后立即出现的 F 元素。你必须记住的30个CSS选择器。 - kapa
这个可以帮助：http://www.cheatography.com/davechild/cheat-sheets/css2/ - Chen Kinnrot
3
如果他不知道'+'或者'>'怎么称呼，他怎么能在谷歌上搜索呢？ - deathlock
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>
我要感谢你们所有人。对于这个答案，我有一个疑惑。例如，li > a 表示它只会影响直接子元素。那么它是否也会影响任何子级 a 标签？使用 + 与分组类有什么区别？ - Code Lover
它只会影响到直接的<a>元素，而不会影响任何子元素。唯一的区别是+只会影响相邻的兄弟元素。而使用组合类则会影响所有应用了该类的元素。 - Gabe
那么关于 + .. 呢？我的意思是我仍然困惑于分组类和使用 + ... 之间的区别，+ 是否有特定用途或者两者是相同的。 - Code Lover
我已经使用 > 检查了子级，它也会影响到它们...所以如果你说它只应该影响第一个子级而不是第一个子级的子级，为什么会影响到我呢？？？ - Code Lover
6
选择器在W3 CSS规范中有详细解释，以下是摘要： 直接子元素选择器 > 选择器是直接子元素选择器。在您的示例 li > a 中，该规则将选择任何作为 <li> 元素的直接子元素的 <a> 元素。
该规则将选择以下示例中的锚点：
<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>
3
“div + span”会选择和“div”元素具有相同父级的“span”元素。啊，好的，所以div不需要在span之前吗？它会匹配这个HTML中的两个span吗？ <span/> <div/> <span/>。我认为只有第二个span会匹配。 - powerbuoy
从您提供的规范中（重点添加）：相邻兄弟选择器具有以下语法：E1 + E2，其中E2是选择器的主题。如果E1和E2在文档树中具有相同的父级并且E1紧接着E2，则选择器匹配，忽略非元素节点（例如文本节点和注释）。 - We Are All Monica
2
> 是直接子元素选择器。在你的例子中，li > a 只会选择作为 <li> 直接子元素的 <a> 标签。 + 表示选中元素的同级兄弟元素。在你的例子中，div + span 会选择与 <div> （有相同父元素）相邻的任何 <span> 元素。
0
-1

我不确定加号的含义，但在CSS中>符号表示直接子元素，请考虑这一点。

div > h1 { color: red; }

这将为所有直接位于 div 中的 h1 标签设置样式。

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

在这种情况下，第一个h1将保持不变，第二个h1因为它是div标签的直接子元素，所以会变成红色。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接