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

Question

Например:

p + p {
  /* Some declarations */
}

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

Answer 1

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

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

---

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

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

Answer 2

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

С Блог 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>)

Answer 3

Знак + означает выбор adjacent sibling

Пример:

CSS

p + p
{
   font-weight: bold;
} 

HTML

Стиль будет применяться со второго <p>

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

---

* * Пример 1 022

Посмотрите на эту скрипку, и вы поймете ее навсегда: http://jsfiddle.net/7c05m7tv/ (Другая скрипка: http://jsfiddle.net/7c05m7tv/70/)

---

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

Селекторы смежных братьев и сестер поддерживаются в Internet Explorer 5.x Macintosh. Они также поддерживаются в предварительном выпуске Netscape 6 для всех многочисленных платформ, для которых он доступен, и в предварительном выпуске 3 для Opera 4 для Windows. В обработке IE5 для Windows и Opera 3 для Windows есть ошибки в обработке смежных селекторов.

Полезно знать: Internet Explorer 7 неправильно обновляет стиль, когда элемент динамически размещается перед элементом, который соответствует селектору. В Internet Explorer 8, если элемент вставляется динамически при нажатии на ссылку, стиль «первый ребенок» не применяется до тех пор, пока ссылка не потеряет фокус.

---

Узнать больше

• http://css -tricks.com / альманах / селекторы / а / смежно-родственный /
• http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
• https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors

Answer 4

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

Answer 5

Селектор

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

Answer 6

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

Answer 7

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

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

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

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

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

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

Answer 8

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

Answer 9

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.

конечный результат выглядит следующим образом

Answer 10

Плюс (+) выберет первый непосредственный элемент. Когда вы используете + селектор, вы должны указать два параметра. Это будет более понятно на примере: Здесь 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. Важно отметить, что второй диапазон не будет выбран.