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

 

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 p without + p ?

This selector means that the style applies only to paragraphs directly following another paragraph.
A plain p selector would apply the style to every paragraph in the page.

See adjacent selectors on W3.org.

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.

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

It's the Adjacent sibling selector.

From Splash of Style blog.

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.

h1>p selects any p element that is a direct (first generation) child (inside) of an h1 element.

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

    • h1+p will select the first p element that is a sibling (at the same level of the dom) as an h1 element.

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

    • The + sign means select an adjacent sibling

    Example:

    CSS 

    p + p
{
   font-weight: bold;
}

    HTML

    The style will apply from the second <p> 

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

    Example

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

    Browser Support

    Adjacent-sibling selectors are supported in Internet Explorer 5.x Macintosh. They are also supported in the Netscape 6 preview release 1 for all the myriad platforms for which it's available, and in preview release 3 of Opera 4 for Windows. There are bugs in the handling of adjacent-sibling selectors in IE5 for Windows, and Opera 3 for Windows.

    Good to know: Internet Explorer 7 doesn't update the style correctly when an element is dynamically placed before an element that matched the selector. In Internet Explorer 8, if an element is inserted dynamically by clicking on a link the first-child style isn't applied until the link loses focus.

    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://www.djcxy.com/p/3902.html

    上一篇: 有没有“以前的兄弟”CSS选择器？

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