CSS стиль стиль элемента [дубликат]

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

Подробнее

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

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

Из блога 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>)

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

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

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.

выглядит следующим образом

+ называется 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

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

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

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