Html 何时使用CSS+符号

很简单的问题。我已经使用CSS有一段时间了，但很少对我的代码使用+sign。谁能解释一下什么时候使用它最好？我在谷歌上找不到任何东西……非常感谢……

这是

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

在不太通用的术语中，它允许您选择与normal类似的元素，但也可以限定在同一级别上它前面有一个特定的元素

例如，使用此HTML：

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

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

CSS2中还添加了直接 相邻组合子。例如 想象一下，您想要缩进所有 文件中的段落，但不包括 紧接着一个 小标题。第二条规则 下面显示了一个组合的h2选择器 带有p选择器，使用加号作为 表示 声明仅适用于p 紧接着h2：

从-

我发现，当您想要对一系列元素中的第一个元素应用特殊样式时，相邻同级选择器非常有用。例如，如果希望文章第一段的样式与其他段落不同，可以使用：

p {
    /* styles for the first paragraph  */
}

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

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

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

在许多情况下，这可以取代使用class=first

编辑：使用第一个子伪类对于这种特定情况会更好，因为它受到更广泛的浏览器支持。谢谢alex

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

p {
    /* styles for the first paragraph  */
}

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

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

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

---

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

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

使用p+div将允许您设置项目2的样式，因为它正好位于p标记之后

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

使用div+p将允许您设置项目4的样式，因为它正好在div之后

---

以此类推……

这是迄今为止最好的答案，它实际上回答了一个问题：什么时候是最好的情况。第一个例子与p:first child{}和级联效应不一样吗？@alex-是的，你是对的。由于跨浏览器的原因，第一个孩子实际上会工作得更好。我总是忘记它的存在。谢谢别担心。它比：最后一个孩子暂时也有更好的支持。p：第一个孩子不会工作得很好，比如说h2+p，但万一你碰巧在目标p之前放置了任何元素，例如标题。非常简单的解释：