Что означает «+» (знак плюс) CSS-селектор?

Например:

p + p {
  /* Some declarations */
}

Я не знаю, что +значит. В чем разница между этим и просто определением стиля pбез + p?

Смотрите смежные селекторы на W3.org.

В этом случае селектор означает, что стиль применяется только к абзацам, непосредственно следующим за другим абзацем.

Простой pселектор будет применять стиль к каждому абзацу на странице.

Это будет работать только на IE7 или выше. В IE6 стиль не будет применяться ни к каким элементам. >Кстати, это касается и комбинатора.

См. Также обзор Microsoft по совместимости CSS в Internet Explorer .

Это соседний селектор брата.

Из блога 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элемент, который является родным (на том же уровне домена), как h1элемент.

• h1+pсовпадения <h1></h1> <p><p/>( <p>рядом с / после <h1>)

В +означает знак выбор «смежные родственный»

Например, этот стиль будет применяться со второго <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/ )

Поддержка браузера

Селекторы смежных братьев и сестер поддерживаются во всех современных браузерах.

Учить больше

• 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

«+» - это соседний селектор брата. Он выберет любой p ПРЯМО ПОСЛЕ ap (не дочерний или родительский, хотя, брат или сестра).

+селектор называется 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также соответствует в этом примере.

Он будет соответствовать любому элементу, pкоторый непосредственно примыкает к элементу 'p'. Смотрите: http://www.w3.org/TR/CSS2/selector.html

+представляет один из относительных селекторов. Список всех относительных селекторов:

div p- Все <p>элементы внутри <div>элементов выбраны.

div > p- Все <p>элементы, чей прямой родитель <div>выбран. Это работает и в обратном направлении ( p < div)

div + p- Все <p>элементы размещаются сразу после <div>выбора элемента.

div ~ p- Все <p>элементы, которым предшествует <div>элемент, выделены.

Подробнее о селекторах смотрите здесь .

Он выбирает следующий абзац и выравнивает начало абзаца слева, как в Microsoft Word.

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.

конечный результат выглядит так

Плюс (+) выберет первый непосредственный элемент. Когда вы используете + селектор, вы должны указать два параметра. Это станет более понятным на примере: здесь div и span являются параметрами, поэтому в этом случае будет использоваться только первый span после div.

 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. Важно отметить, что второй диапазон не будет выбран.

Это означает, что соответствует каждому p элементу, который находится рядом

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