例如:

p + p {
  /* Some declarations */
}

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


当前回答

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

例如,此样式将从第二个<p>开始应用:

p+p{字号:粗体;} <div><p>第1段</p><p>第2段</p></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

其他回答

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

这是相邻同级选择器。

来自Splash of Style博客。

要定义CSS相邻选择器使用加号。h1+p{颜色:蓝色;}上面的CSS代码将格式化任何h1标题后的第一段(不在里面)蓝色。

h1>p选择作为h1元素的直接(第一代)子元素(内部)的任何p元素。

h1>p匹配<h1><p></p></h1>(<p>内部<h1>)

h1+p将选择第一个p元素作为h1元素,该元素是兄弟元素(在dom的同一级别)。

h1+p匹配<h1></h1><p><p/>(<p>在<h1>旁边/之后)

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

例如,此样式将从第二个<p>开始应用:

p+p{字号:粗体;} <div><p>第1段</p><p>第2段</p></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

+选择器以后面的一个元素为目标。类似地,~选择器以后面的所有元素为目标。如果你感到困惑,这里有一个图表:

“+”是相邻的同级选择器。它将在p之后直接选择任何p(但不是子代或父代,而是兄弟姐妹)。