Где я могу использовать + и> в CSS?

Ответ 1

Знак означает выбор прямого потомка

Пример:

CSS

div > ul {
   list-style: none;
}

HTML Здесь стиль будет применяться к <ul>

<div>
  <ul>
  </ul>
</div>

Знак + означает смежный родной брат

Пример:

CSS

p + p
{
   font-weight: bold;
} 

HTML Здесь стиль будет применяться к последнему <p>

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

Ответ 2

Селекторы подробно описаны в спецификации W3 CSS, но вот дайджест:

Непосредственный дочерний селектор

Селектор > - это непосредственный селектор для детей. В вашем примере li > a правило будет выбирать любой элемент <a>, который является непосредственным дочерним элементом элемента <li>.

Правило выбрало бы якорь в этом примере:

<ul>
   <li><a href="#">An anchor</a></li>
</ul>

Смежный селектор sibling

Селектор + - это соседний селектор для брака. В вашем примере div + span правило будет выбирать любые элементы <span>, которым сразу предшествует элемент <div>, и где оба они имеют один и тот же родительский элемент.

Элемент span будет выбран в этом случае:

<article>
   <div>A preceding div element</div>
   <span>This span would be selected</span>
</article>

Ответ 3

> - это селектор direct child. В вашем примере li > a это будет выбирать только теги <a>, которые являются прямыми потомками <li>.

+ означает братьев и сестер выбранных элементов. В вашем примере div + span будет выбирать любой <span> рядом с <div> (с тем же родителем).

Ответ 4

li > a будет выбирать только элементы a, которые являются прямыми потомками элементов li. div + span будет выбирать только элементы span, которые следуют за элементом div.

Подробнее в @bažmegakapa ссылка: http://www.w3.org/TR/CSS2/selector.html#pattern-matching

Ответ 5

Я не уверен в знаке +, но знак > css означает прямой дочерний элемент, рассмотрим это

div > h1 { color: red; }

Это создаст все теги h1, которые являются прямым дочерним элементом div.

<h1>BLAH</h1>
<div>
    <h1>BLAH</h1>
</div>

В этом случае первый h1 будет оставлен в покое, второй, поскольку он является прямым потомком тега div, будет красным.