何时使用CSS +标志

Question

很容易的问题.我已经使用CSS一段时间但很少使用+叹息我的代码.任何人都可以解释一下使用它的最佳时间吗？我找不到谷歌的任何东西......多亏了数百万...

Answer 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 */
}

Answer 2

每当您想要定位某个选择器的下一个匹配选择器时,请使用它.例如

<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项的样式,因为它就在a之后div.行动中的例子.

等等...