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

Например:

p + p {
  /* Some declarations */
}

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

ОТВЕТЫ

Ответ 1

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

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

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

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

Ответ 2

Это смежный селектор.

Из Разделите блог стиля.

Чтобы определить смежный селектор 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>)

Ответ 3

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

Пример:

CSS

p + p
{
   font-weight: bold;
}

HTML

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

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

Пример

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

Подробнее

Ответ 4

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

Ответ 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>

Ответ 6

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

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

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

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

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

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

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

Ответ 10

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.

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

enter image description here