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

例如：

p + p {
  /* Some declarations */
}

我不知道+是什么意思。这和只为p定义一个没有+p的样式有什么区别？

当前回答

+符号表示选择“相邻兄弟”

例如，此样式将从第二个＜p＞开始应用：

p+p{字号：粗体；} ＜div＞第1段第2段</div>

实例

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

浏览器支持

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

了解更多信息

http://css-tricks.com/almanac/selectors/a/adjacent-sibling/http://www.w3.org/TR/CSS2/selector.html#adjacent-选择器https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

2014-09-02 11:02:04

其他回答

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.

最终输出如下

2018-01-19 12:51:36

+组合子称为相邻兄弟组合子/下一兄弟组合子。

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

它可以被认为是一种“边看”组合，用于检查紧接着的元素。

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

正文{font-family:宋体；字体大小：12px；}p+p{左边距：10px；}＜div＞标题段落这是一段这是另一段这是另一段<小时>页脚段落</div>

由于我们在同一主题上，值得一提的是另一个组合子~，它是通用兄弟组合子/后继兄弟组合子

例如，p~p选择p后面的所有p并不重要，但这两个p应该具有相同的父级。

下面是使用相同标记的情况：

正文{font-family:宋体；字体大小：12px；}p~p{左边距：10px；}＜div＞标题段落这是一段这是另一段这是另一段<小时>页脚段落</div>

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

2016-10-10 12:33:10

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

div p-选中＜div＞元素中的所有＜p＞元素。

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

div+p-选择一个＜div＞元素之后立即放置的所有＜p＞元素。

div~p-选择前面有＜div＞元素的所有＜p＞元素。

下面是关于选择器的更多信息。

2018-04-11 07:15:03