Существует ли селектор 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 содержание 1" <div> а также "заголовок" <div>.
Я думал, что селектор на стиле будет только относиться к первому прямому ребенку отделения с классом, названным "разделом". Как я могу изменить селектор для получения то, что я хочу?
4 ответа
То, что вы опубликовали, буквально означает «Найти любых дивов, которые находятся внутри разделов дивов и являются первым ребенком их родителей». Под содержит один тэг, соответствующий описанию.
Мне неясно, хотите ли вы обоих детей главного див или нет. Если да, используйте это:
div.section > div
Если вы хотите только заголовок, используйте это:
div.section > div:first-child
С помощью > меняет описание на: «Найти любые див, которые являются прямыми потомками див раздела», что вы хотите.
Обратите внимание, что этот метод поддерживают все основные браузеры, за исключением IE6. Если IE6 поддержка критически важна, вам придется добавить классы к дочерним дискам и использовать их вместо этого. Иначе не стоит заботиться.
CSS называется каскадными таблицами стилей, потому что правила наследуются. Используя следующий селектор, выберет только прямого потомка родителя, но его правила будут унаследованы дочерними элементами этого div divs :
div.section > div { color: red }
Теперь и этот div , и его дочерние элементы будут красными . Вам нужно отменить все, что вы установили для родителя, если вы не хотите, чтобы он наследовал:
div.section > div { color: red }
div.section > div div { color: black }
Теперь только тот единственный div , который является прямым потомком div.section будет красным, но его дочерние элементы divs по-прежнему будут черными.
Используйте div.section> div .
Еще лучше использовать тег для заголовка и
div.section h1 в вашем CSS, чтобы поддерживать старые браузеры (которые не знают о > ) и сохраняют семантику разметки.