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

CSS

神乐西里

2020-03-16

例如：

p + p {
  /* Some declarations */
}

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

第1744篇《“ +”（加号）CSS选择器是什么意思？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共10个回答

Pro路易猴子 2020.03.16

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

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

小小古一 2020.03.16

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.

最终输出看起来像这样

SamL 2020.03.16

加号（+）将选择第一个立即元素。使用+选择器时，必须提供两个参数。通过示例将更加清楚：此处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之后的第一个跨度。重要的是要注意，不会选择第二个跨度。

古一凯Gil 2020.03.16

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

Stafan路易 2020.03.16

+显示相对选择器之一。所有相关选择器的列表：

div p- 选择了<p>元素内部的所有元素<div>。

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

div + p-所有<p>元素都紧接在<div>元素之后。

div ~ p-选择<p>元素前面的所有元素<div>。

有关选择器的更多信息，请参见此处。

小宇宙Stafan 2020.03.16

该+标志意味着选择一个“相邻的兄弟”

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

p + p {
   font-weight: bold;
}

<div>
   <p>Paragraph 1</p>
   <p>Paragraph 2</p>
</div>

例

看到这个JSFiddle，您将理解它：http : //jsfiddle.net/7c05m7tv/ （另一个JSFiddle：http : //jsfiddle.net/7c05m7tv/70/）

浏览器支持

所有现代浏览器均支持相邻的兄弟选择器。

学到更多

理查德Harry 2020.03.16

+选择器称为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此示例中的最后一个也是匹配的。

卡卡西樱 2020.03.16

这是相邻的兄弟选择器。

从风格飞溅博客。