it-swarm.com.ru

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

Например:

p + p {
  /* Some declarations */
}

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

667
gday

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

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


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

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

693
Thorarin

Это соседний селектор.

С 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>)
187
Matthew Vines

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

Пример:

CSS

p + p
{
   font-weight: bold;
} 

HTML

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

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

Пример

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


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

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

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


Учить больше

52
Cas Bloem

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

40
Gordon Gustafson

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

22
Lijo Joseph

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

10
Michael Morton

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

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

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

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

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

Подробнее о проверке селекторов здесь .

6
Nesha Zoric

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

2
flo

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

1
user6142140
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

0
IMRA