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

 

例如： 

p + p {
  /* Some declarations */
}

我不知道+含义。 这是什么之间的区别，只是定义样式p ，而不+ p ？

此选择器意味着该样式仅适用于紧跟在另一段落之后的段落。
普通的p选择器会将样式应用于页面中的每个段落。

请参阅W3.org上的相邻选择器。

这只适用于IE7或以上版本。 在IE6中，样式不会应用于任何元素。 顺便说一下，这也适用于> combinator。

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

它是邻接兄弟选择器。

从风格博客的飞溅。

要定义一个CSS相邻选择器，使用加号。 

h1+p {color:blue;}

上面的CSS代码会将任何h1标题之后的第一段（不在里面）格式化为蓝色。

h1>p选择任何p元件，其为直接（第一代）子（内侧） h1元件。

  • h1>p的匹配<h1> <p></p> </h1> <p>内<h1> ）

    • h1+p将选择与h1元素相同的第一个p元素（与dom相同的级别）。

  • h1+p匹配<h1></h1> <p><p/> <p>旁/后<h1> ）

    • +符号表示选择一个adjacent sibling

    例：

    CSS 

    p + p
{
   font-weight: bold;
}

    HTML

    风格将适用于第二个<p> 

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

    例

    看到这个小提琴，你会永远明白它：http://jsfiddle.net/7c05m7tv/（另一个小提琴：http://jsfiddle.net/7c05m7tv/70/）

    浏览器支持

    Internet Explorer 5.x Macintosh支持相邻同级选择器。 它们在Netscape 6预览版本1中为所有可用的所有无数平台以及Opera 4 for Windows的预览版本3提供支持。 在IE5 for Windows和Opera 3 for Windows中处理邻居兄弟选择器时存在缺陷。

    值得一提的是：当元素被动态放置在与选择器匹配的元素之前时，Internet Explorer 7不会正确更新样式。 在Internet Explorer 8中，如果通过单击链接动态插入元素，则在链接失去焦点之前，不会应用第一个子样式。

    学到更多

  • http://css-tricks.com/almanac/selectors/a/adjacent-sibling/
  • http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
  • https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors
    • 链接地址: http://www.djcxy.com/p/3901.html

    上一篇: What does the "+" (plus sign) CSS selector mean?

    下一篇: Which characters are valid in CSS class names/selectors?