何时使用 CSS + 符号 [重复]

Posted 2023-03-06

【中文标题】何时使用 CSS + 符号 [重复]

【英文标题】：When to use CSS + sign [duplicate]

【发布时间】：2011-03-20 21:11:21

【问题描述】：

非常简单的问题。我使用 CSS 已经有一段时间了，但我的代码很少使用 + sigh。任何人都可以解释使用它的最佳时间是什么时候？我无法从 Google 中找到任何内容...感谢您的百万...

【参考方案1】：

我发现相邻兄弟选择器在您想对一系列元素的第一个元素应用特殊样式时很有用。例如，如果您想为文章的第一段设置与其他段落不同的样式，您可以使用：

p 
    /* styles for the first paragraph  */


p + p 
    /* styles for all other paragraphs */

这可以在许多情况下替换使用class="first"。

编辑：使用first-child 伪类对于这种特定情况会更好，因为它受到更广泛的浏览器的支持。 （谢谢亚历克斯）

您可能还想调整某些元素在彼此相邻时的定位方式。如果您有一个无序列表，它本身看起来不错，但在靠近段落时需要较少的顶部填充，您可以使用：

ul 
    padding-top: 1em;
    /* Default ul styling */


p + ul 
    padding-top: 0;
    /* special styling for lists that come after paragraphs */

【讨论】：

这是迄今为止最好的答案，它实际上回答了这个问题（什么时候是最好的情况）。

第一个例子是不是和p:first-child 不一样，还有级联效果？

@alex - 是的，你是对的。出于跨浏览器的原因，first-child 实际上会更好。我只是总是忘记它的存在。谢谢！

不用担心。暂时也比:last-child有更好的支持。

p:first-child 不会像h2 + p 那样工作，但如果你碰巧将任何元素（例如标题）放在@ 之前987654330@您的目标。

【参考方案2】：

只要你想定位某个选择器的下一个匹配选择器，就可以使用它。例如

<p>Item 1</p>
<div>Item 2</div>
<div>Item 3</div>
<p>Item 4</p>

使用p + div 将允许您设置Item 2 的样式，因为它就在p 标记之后。 Example in action.

使用p + p 不会设置任何样式，因为下一个p 标记不在第一个标记旁边。 Example in action.

使用div + p 将允许您设置Item 4 的样式，因为它就在div 之后。 Example in action.

等等……

【讨论】：

很简单的解释:)

【参考方案3】：

是Adjacent Sibling Selector

相邻的兄弟选择器有 以下语法：E1 + E2，其中 E2 是 选择器的主题。这 如果 E1 和 E2 共享，则选择器匹配 文档树中的同一个父级 E1 紧接在 E2 之前， 忽略非元素节点（例如 文本节点和 cmets)。

用不太通用的术语来说，它可以让您像正常一样选择一个元素，但也可以限定它在同一级别之前有一个特定元素。

例如这个 html：

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

您通常可以通过询问span 来选择span，但是如果您只想在p 前面有一个span 时以某种样式影响span，您可以使用p + span .请注意，这里不能使用div + span，因为div 处于不同的“级别”。

【参考方案4】：

在 CSS2 中还添加了直接 相邻的组合器。例如， 想象一下你想缩进所有 文档中的段落，除了 紧跟在一个 副标题 (<h2>)。第二条规则 下面显示了一个 h2 选择器组合 使用加号作为 p 选择器 组合子表示 声明仅适用于p 紧跟h2：

p  text-indent: 0.5in; 
h2 + p  text-indent: 0; 

来自 - http://www.xml.com/pub/a/2003/06/18/css3-selectors.html