скачать - изучаем программирование на html5




Есть ли селектор CSS только для первого прямого ребенка? (4)

У меня есть следующий 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 
{
  ...
}

По какой-то причине я не понимаю, что стиль применяется к «субсодержанию 1» <div> а также к «заголовку» <div> .

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


CSS называется каскадным таблицами стилей, потому что правила наследуются. Используя следующий селектор, выберем только прямой дочерний элемент родителя, но его правила будут унаследованы дочерними div этого div :

div.section > div { color: red }

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

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

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


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

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


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

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

div.section > div

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

div.section > div:first-child

Используя > измените описание на: «Найдите любые divs, которые являются прямыми потомками разделов div», которые вы хотите.

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


div.section > div




css-selectors