Question

例如：

p + p {
  /* Some declarations */
}

我不知道+的含义。这与仅定义p没有+ p的样式之间的区别是什么？

Answer 1

此选择器表示该样式仅适用于直接跟随另一段落的段落普通p选择器会将样式应用于页面中的每个段落。

请参阅W3.org上的adjacent selectors。

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

另请参阅Microsoft对CSS compatibility in Internet Explorer的概述。

Answer 2

这是相邻的兄弟选择器。

来自Splash of Style blog.

要定义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>旁边的{{1}}）

Answer 3

+符号表示选择 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中，如果通过单击链接动态插入元素，则在链接失去焦点之前不会应用第一个子样式。

了解更多

Answer 4

“+”是相邻的兄弟选择器。它将直接选择任何一个p（不是孩子或父母，兄弟姐妹）。

Answer 5

+选择器名为 Adjacent Sibling Selector 。

例如，选择器 p + p ，选择紧跟p元素后的p元素

可以将其视为looking outside选择器，它检查紧随其后的元素。

以下是一个示例摘录：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

以下是使用相同标记的样子：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

Answer 6

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

Answer 7

+提供了一个相对选择器。所有相对选择者列表：

div p - 选择了<p>元素中的所有<div>个元素。

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

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

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

有关选择器的更多信息，请检查here。

Answer 8

+选择器将其后的一个元素作为目标。同样，~选择器将其后的所有元素作为目标。如果您感到困惑，这是一个图表：

Answer 9

它选择下一个段落并从左侧缩进段落的开头，就像在Microsoft Word中一样。

Answer 10

Plus（+）将选择第一个直接元素。使用+选择器时，必须提供两个参数。这将通过示例更清楚：这里div和span是参数，所以在这种情况下只有样式div后的第一个span。

 div+ span{
   color: green;
   padding :100px;
}

     <div>The top or first element  </div>
       <span >this is span immediately after div, this will be selected</span>
       <span>This will not be selected</span>

以上样式仅适用于div后的第一个跨度。请务必注意，不会选择第二个跨度。

Answer 11

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.

最终输出看起来像这样

Answer 12

这意味着它匹配紧邻的每个p元素

www.snoopcode.com/css/examples/css-adjacent-sibling-selector

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

12 个答案:

实施例

浏览器支持

了解更多