it-swarm.com.ru

Есть ли селектор CSS только для первого прямого потомка?

У меня есть следующий HTML

<div class="section">
   <div>header</div>
   <div>
          contents
          <div>sub contents 1</div>              
          <div>sub contents 2</div>
   </div>
</div>

И следующий стиль:

DIV.section DIV:first-child 
{
  ...
}

По какой-то причине я не понимаю, что стиль применяется к "sub content 1"<div>, а также к "header"<div>.

Я думал, что селектор стиля будет применяться только к первому прямому потомку div с классом, называемым "section". Как я могу изменить селектор, чтобы получить то, что я хочу?

273
Jeremy

То, что вы опубликовали, буквально означает: "Найдите все div-ы, которые находятся внутри div-ов раздела и являются первыми дочерними элементами их родителей". Подпрограмма содержит один тег, соответствующий этому описанию.

Мне неясно, хотите ли вы обоих детей основного div или нет. Если так, используйте это:

div.section > div

Если вы хотите только заголовок, используйте это:

div.section > div:first-child

Использование > изменяет описание на: "Найдите любые div-ы, которые являются прямыми потомками div-разделов", что вам и нужно.

Обратите внимание, что все основные браузеры поддерживают этот метод, кроме IE6. Если поддержка IE6 критически важна, вам нужно будет добавить классы к дочерним элементам div и использовать их вместо этого. Иначе об этом не стоит заботиться.

456
Matchu

CSS называется Cascading Style Sheets, потому что правила наследуются. Используя следующий селектор, будет выбирать только прямой дочерний элемент родителя, но его правила будут наследоваться этим именем divname __ divsname__:

div.section > div { color: red }

Теперь оба divи его дочерние элементы будут redname__. Вам нужно отменить все, что вы установили для родителя, если вы не хотите, чтобы он наследовал:

div.section > div { color: red }
div.section > div div { color: black }

Теперь только тот одиночный divname__, который является прямым потомком div.section, будет красным, а его дочерние divsпо-прежнему будут черными.

40
Doug Neiner

Нашел этот вопрос в поиске в Google. Это вернет первый дочерний элемент с классом container, независимо от типа дочернего.

.container > *:first-child
{
}
33
Tom Gullen
div.section > div
6
3zzy

Используйте div.section > div.

Еще лучше, используйте тег <h1> для заголовка и div.section h1 в вашем CSS, чтобы поддерживать более старые браузеры (которые не знают о >) и сохранить семантику разметки.

6
ЯegDwight