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

What does the "+" (plus sign) CSS selector mean?

提问by gday

For example:

例如：

p + p {
  /* Some declarations */
}

I don't know what the +means. What's the difference between this and just defining a style for pwithout + p?

我不知道是什么+意思。这与只为pwithout定义样式有什么区别+ p？

采纳答案by Thorarin

See adjacent selectorson W3.org.

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

In this case, the selector means that the style applies only to paragraphs directly following another paragraph.

在这种情况下，选择器意味着该样式仅适用于紧跟在另一个段落之后的段落。

A plain pselector would apply the style to every paragraph in the page.

普通p选择器会将样式应用于页面中的每个段落。

---

---

This will only work on IE7 or above. In IE6, the style will not be applied to any elements. This also goes for the >combinator, by the way.

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

See also Microsoft's overview for CSS compatibility in Internet Explorer.

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

回答by Matthew Vines

It's the Adjacent sibling selector.

它是相邻兄弟选择器。

From Splash of Style blog.

来自Splash of Style 博客。

To define a CSS adjacent selector, the plus sign is used.

h1+p {color:blue;}

The above CSS code will format the first paragraph after (not inside) any h1 headings as blue.

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

h1+p {color:blue;}

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

h1>pselects any pelement that is a direct (first generation) child (inside) of an h1element.

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

• h1>pmatches <h1><p></p></h1>(<p>inside <h1>)

• h1>p火柴<h1><p></p></h1>（<p>内<h1>）

h1+pwill select the first pelement that is a sibling (at the same level of the dom) as an h1element.

h1+p将选择第p一个兄弟元素（在 dom 的同一级别）作为h1元素。

• h1+pmatches <h1></h1><p><p/>(<p>next to/after <h1>)

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

回答by Cas Bloem

The +sign means select an "adjacent sibling"

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

For example, this style will apply from the second <p>:

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

p + p {
   font-weight: bold;
} 

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

---

---

Example

例子

See this JSFiddle and you will understand it: http://jsfiddle.net/7c05m7tv/(Another JSFiddle: http://jsfiddle.net/7c05m7tv/70/)

看到这个 JSFiddle，你就会明白：http: //jsfiddle.net/7c05m7tv/（另一个 JSFiddle：http: //jsfiddle.net/7c05m7tv/70/）

---

---

Browser Support

浏览器支持

Adjacent sibling selectors are supported in all modern browsers.

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

---

---

Learn more

了解更多

• 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://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

回答by Gordon Gustafson

"+" is the adjacent sibling selector. It will select any p DIRECTLY AFTER a p (not a child or parent though, a sibling).

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

回答by Lijo Joseph

+selector is called Adjacent Sibling Selector.

+选择器被称为Adjacent Sibling Selector。

For example, the selector p + p, selects the pelements immediately following the pelements

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

It can be thought of as a looking outsideselector which checks for the immediately following element.

它可以被认为是一个looking outside选择器，它检查紧随其后的元素。

Here is a sample snippet to make things more clear:

这是一个示例片段，使事情更清楚：

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>

Since we are one the same topic, it is worth mentioning another selector, ~selector, which is General Sibling Selector

由于我们是同一个话题，所以值得一提的是另一个选择器，~选择器，它是General Sibling Selector

For example, p ~ pselects all the pwhich follows the pdoesn't matter where it is, but both pshould be having the same parent.

例如，p ~ p选择p紧随其后的所有p元素并不重要，但两者都p应该具有相同的父级。

Here is how it looks like with the same markup:

这是使用相同标记的样子：

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>

Notice that the last pis also matched in this sample.

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

回答by Michael Morton

It would match any element pthat's immediately adjacent to an element 'p'. See: http://www.w3.org/TR/CSS2/selector.html

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

回答by Nesha Zoric

+presents one of the relative selectors. List of all relative selectors:

+呈现相对选择器之一。所有相对选择器的列表：

div p- All <p>elements inside <div>elements are selected.

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

div > p- All <p>elements whose direct parent is <div>are selected. It works backward too (p < div)

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

div + p- All <p>elements places immediately after <div>element are selected.

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

div ~ p- All <p>elements that are preceded by a <div>element are selected.

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

More about selectors check here.

有关选择器的更多信息，请查看此处。

回答by flo

It selects the next paragraph and indents the beginning of the paragraph from the left just as you might in Microsoft Word.

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

回答by IMRA

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.

final output look like this

最终输出看起来像这样

回答by IMRA

The Plus (+) will select the first immediate element. When you use + selector you have to give two parameters. This will be more clear by example: here div and span are parameters, so in this case only first span after the div will be styled.

加号 (+) 将选择第一个直接元素。当您使用 + 选择器时，您必须提供两个参数。这将通过示例更清楚：这里 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>

Above style will only apply to first span after div. It is important to note that second span will not be selected.

以上样式仅适用于 div 之后的第一个跨度。重要的是要注意不会选择第二个跨度。