"+"(加号)CSS选择器是什么意思？

Question

例如:

p + p {
  /* Some declarations */
}

我不知道是什么+意思.这与仅定义p没有的风格有什么区别+ p？

Answer 1

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

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

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

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

Answer 2

这是相邻的兄弟选择器.

来自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元素的第一个元素(在dom的同一级别)h1.

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

Answer 3

该+标志意味着选择<p>

例:

CSS

p + p {
   font-weight: bold;
} 

HTML

风格将适用于第二种 +

<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</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

Answer 4

"+"是相邻的兄弟选择器.它会直接选择任何一个p(虽然不是孩子或父母,兄弟姐妹).

Answer 5

+选择器被调用Adjacent Sibling Selector.

例如,选择器p + p选择p元素后面的p元素

它可以被认为是looking outside检查紧接着的元素的选择器.

这是一个使事情更清晰的示例代码段:

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>

由于我们是同一个主题,因此值得一提的是另一个选择器,~选择器General Sibling Selector

例如,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此示例中的最后一个也匹配.

Answer 6

在+选择目标后的一个元素。同样，~选择器针对之后的所有元素。这是一个图表，如果你感到困惑：

Answer 7

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

Answer 8

+介绍一个相对选择器.所有相对选择者列表:

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

div > p- 选择了<p>直接父项的所有元素<div>.它也向后工作(p < div)

div + p- 选择<p>元素后立即放置所有元素<div>.

div ~ p- 选择<p>以<div>元素开头的所有元素.

更多选择查看这里.