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

Например:

p + p { /* Some declarations */ }

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

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

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

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

h1+p соответствует

(
рядом с / после
)

Знак + означает adjacent sibling

Пример:

CSS

 p + p { font-weight: bold; }

HTML

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

пример

Смотрите этот скрипт, и вы поймете его навсегда: 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, если элемент вставлен динамически, нажав на ссылку, стиль первого ребенка не применяется до тех пор, пока ссылка не потеряет фокус.

Выучить больше

«+» – смежный селектор. Он выберет любой p DIRECTLY AFTER ap (а не дочерний или родительский, хотя и родной брат).

+ селектор называется Adjacent Sibling Selector .

Например, селектор p + p , выбирает элементы p сразу после p элементов

Его можно рассматривать как looking outside селектор, который проверяет сразу следующий элемент.

Вот пример fragmentа, чтобы сделать вещи более ясными:

 body { font-family: Tahoma; font-size: 12px; } p + p { margin-left: 10px; }

  Header paragraph
 This is a paragraph
 This is another paragraph
 This is yet another paragraph
 
 Footer paragraph

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

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

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

div p – все элементы

внутри элементов

div > p – все элементы

чей прямой родительский элемент

. Он работает также назад ( p < div )

div + p - Все элементы

сразу после выбора элемента

div ~ p - все элементы

которым предшествует элемент

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

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

  div+ span{ color: green; padding :100px; } The top or first element 
 this is span immediately after div, this will be selected This will not be selected

Выше стиль будет применяться только к первому диапазону после div. Важно отметить, что второй интервал не будет выбран.

 p+p{ //styling the code } p+p{ } simply mean find all the adjacent/sibling paragraphs with respect to first paragraph in DOM body.   This is first paragraph
   This is second paragraph
 This is third paragraph
 
 Styling part  It will style all sibling paragraph with red color.

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

введите описание изображения здесь