Что означает селектор CSS " + " (знак плюс)?
например:
p + p {
/* Some declarations */
}
Я не знаю +
средства. В чем разница между этим и просто определением стиля для p
без + p
?
11 ответов
этот селектор означает, что стиль применяется только к абзацам непосредственно после очередного абзаца.
Равнина p
selector применит стиль к каждому абзацу на странице.
посмотреть селекторы ВКЛ W3.org.
это будет работать только на IE7 или выше. В IE6 стиль не будет применяться ни к каким элементам. Это также относится к >
комбинатора, кстати.
см. также обзор Microsoft для совместимость CSS в Internet Explorer.
это соседний селектор братьев и сестер.
чтобы определить смежный селектор 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>
)
на +
знак означает выберите 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 preview release 1 для всех бесчисленных платформ, для которых он доступен, и в preview release 3 Opera 4 для Windows. В IE5 для Windows и Opera 3 для Windows есть ошибки в обработке селекторов соседних братьев.
хорошо знаю: Internet Explorer 7 неправильно обновляет стиль, когда элемент динамически помещается перед элементом, который соответствует селектору. В Internet Explorer 8, если элемент вставляется динамически, нажав на ссылку, первый дочерний стиль не применяется, пока ссылка не потеряет фокус.
узнать больше
"+" является смежным селектором братьев. Он будет выбирать любой p непосредственно после p (не ребенок или родитель, хотя, брат).
+
селектор называется 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
Он выбирает следующий абзац и отступы в начале абзаца слева так же, как вы могли бы в Microsoft Word.
+
представляет один из относительных селекторов. Список всех относительных селекторов:
div p
- все <p>
внутри элементы.
div > p
- все <p>
элементы, прямой родитель <div>
выбранные. Он тоже работает назад (p < div
)
div + p
- все <p>
элементы сразу после <div>
элемент выбран.
div ~ p
- все <p>
элементы, которым предшествует a <div>
элемент выбран.
подробнее о проверке селекторов здесь.
плюс ( + ) выберет первый непосредственный элемент. При использовании + selector необходимо указать два параметра. Это будет более ясно на примере: здесь 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. Важно отметить, что второй диапазон не будет выбран.
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.
конечный результат выглядит следующим образом
это означает, что он соответствует каждому p
элемент, который непосредственно примыкает
www.snoopcode.com/css/examples/css-adjacent-sibling-selector