Що означає селектор 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елемент, який є братом (на тому самому рівні dom), як 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

"+" - сусідній селектор. Він вибере будь-яку П ПІДПРИЄМНО ПІСЛЯ 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 - параметри, тому в цьому випадку буде стилізовано лише перший проміжок після 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>

Наведений вище стиль стосується лише першого проміжку після діва. Важливо зазначити, що другий проміжок не буде обраний.

Це означає, що він відповідає кожному pелементу, який знаходиться поруч

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