“+”（加号）CSS选择器是什么意思？

小开

最佳答案

相邻选择器W3.org.

在这种情况下，选择器意味着样式仅适用于直接跟随另一个段落的段落。

普通的p选择器会将样式应用于页面中的每个段落。

这仅适用于IE7或更高版本。在IE6中，该样式不会应用于任何元素。顺便说一句，这也适用于>组合器。

另请参阅Microsoft对Internet Explorer中的CSS兼容性的概述。

小开

它将匹配紧邻元素“p”的任何元素p。请参阅：http://www.w3.org/TR/CSS2/selector.html

小开

它是相邻的兄弟姐妹选择器。

从Splash of Style博客。

要定义一个CSS相邻选择器，使用加号。
h1+p {color:blue;}
上面的CSS代码将格式化任何h1标题之后（不在其中）的第一段蓝色

h1>p选择任何p元素，它是h1元素的直接（第一代）子元素（内部）。

h1>p匹配<h1><p></p></h1>（<p>在<h1>里面）

h1+p将选择第一个p元素作为h1元素（在dom的同一级别）。

h1+p匹配<h1></h1><p><p/>（<p>紧挨着/在<h1>之后）

小开

"+"是相邻的兄弟选择器。它将选择p直接在p之后（不是子节点或父节点，而是兄弟节点）。

小开

+符号表示选择一个“相邻的兄弟姐妹”

例如，这个样式将从第二个<p>开始应用：

p + p {font-weight: bold;}

<div><p>Paragraph 1</p><p>Paragraph 2</p></div>

示例

看看这个JSFiddle，你就会明白了：http://jsfiddle.net/7c05m7tv/（另一个jsfiddle：http://jsfiddle.net/7c05m7tv/70/）

浏览器支持

所有现代浏览器都支持相邻的同级选择器。

了解更多

小开

+组合子称为相邻兄弟组合器/下一个同级组合器。

例如，p + p选择器的组合，选择紧跟在p元素之后的p元素

它可以被认为是一个“看旁边”的组合，用于检查紧随其后元素。

以下是一个示例片段，以使事情更清楚：

body {font-family: Tahoma;font-size: 12px;}p + p {margin-left: 10px;}

<div><p>Header paragraph</p><p>This is a paragraph</p><p>This is another paragraph</p><p>This is yet another paragraph</p><hr><p>Footer paragraph</p></div>

由于我们在同一个主题上，值得一提的是另一个组合子~，即通用同胞组合子/后续同级组合子

例如，p ~ p选择所有p，其中如下p在哪里并不重要，但两个p应该具有相同的父级。

这是使用相同标记时的样子：

body {font-family: Tahoma;font-size: 12px;}p ~ p {margin-left: 10px;}

<div><p>Header paragraph</p><p>This is a paragraph</p><p>This is another paragraph</p><p>This is yet another paragraph</p><hr><p>Footer paragraph</p></div>

请注意，最后一个p也在此示例中匹配。

小开

p+p{//styling the code}
p+p{} simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.
<div><input type="text" placeholder="something"><p>This is first paragraph</p><button>Button </button><p> This is second paragraph</p><p>This is third paragraph</p></div>
Styling part<style type="text/css">p+p{color: red;font-weight: bolder;}</style>
It will style all sibling paragraph with red color.

最终输出看起来像这样

小开

+表示一个相对选择器。这是所有相对选择器的列表：

div p-选择<div>元素内的所有<p>元素。

div > p-选择直接父级为<div>的所有<p>元素。它也向后工作（p < div）

div + p-选择紧随<div>元素之后的所有<p>元素。

div ~ p-选择前面有<div>元素的所有<p>元素。

这里有更多关于选择器的信息

小开

+选择器以后面的一个元素为目标。类似地，~选择器以后面的所有元素为目标。如果您感到困惑，这是一个图表：