CSS Child Selector - PullRequest
Новая
       34

CSS Child Selector

3 голосов
/ 10 июня 2011

Я прекрасно понимаю разницу между ребенком и потомками. Однако у меня проблема с селектором дочерних элементов. Возможно я не правильно что-то понимаю. Возьмите следующий HTML в качестве примера. Это трехуровневое навигационное меню. 

<div id="nav">
    <ul class="menu">
        <li><a href="#">Menu Item 1</a></li>
        <li><a href="#">Menu Item 2</a>
            <ul class="sub-menu">
                <li><a href="#">Sub Menu Item 1</a></li>
                <li><a href="#">Sub Menu Item 2</a>
                    <ul class="sub-menu">
                        <li><a href="#">Sub Sub Menu Item 1</a></li>
                        <li><a href="#">Sub Sub Menu Item 2</a></li>
                        <li><a href="#">Sub Sub Menu Item 3</a></li>
                    </ul>
                </li>
                <li><a href="#">Sub Menu Item 3</a></li>
            </ul>
        </li>
        <li><a href="#">Menu Item 3</a></li>
    </ul>
</div>

Основываясь на моем понимании дочернего (>) селектора в css, верно следующее: 

#nav {}
#nav ul.menu {}
#nav ul.menu > li {} /* main navigation items only */
#nav ul.menu > li > ul.sub-menu li {} /* the 2nd tier only */
#nav ul.menu > li > ul.sub-menu ul.sub-menu {} /* the 3rd tier only */

Однако, похоже, это не так. CSS для 2-го уровня также применяется к 3-му уровню. И только с объявлением !important я могу перезаписать 2-й уровень в последнем определении CSS.

Имеет смысл?

Ответы [ 3 ]

5 голосов
/ 10 июня 2011 
nav ul.menu > li {} /* main navigation items only */

правильный 

#nav ul.menu > li > ul.sub-menu li {} /* the 2nd tier only */

неправильно - Вы выбираете ul.menu child li, у которого есть child ul.sub-menu, все элементы li под ним.

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

#nav ul.menu > li > ul.sub-menu > li {}

Последний 

#nav ul.menu > li > ul.sub-menu ul.sub-menu {}

должно работать нормально, если вы держите его только в 3-х уровнях.

1 голос
/ 10 июня 2011

#nav ul.menu > li > ul.sub-menu li {} // второй уровень

Последний селектор ul.sub-menu li выбирает элементы child li из 2-го уровня и потомка li в пределах 3-го уровня.

#nav ul.menu > li > ul.sub-menu > li {} // может заставить его ограничиться вторым уровнем

Также, согласно http://www.evotech.net/blog/2008/05/browser-css-selector-support/ поддержка для 'E> F'селекторы - это небольшая ошибка в IE6, которая может не быть проблемой для вас.

1 голос
/ 10 июня 2011 
#nav ul.menu > li > ul.sub-menu li {}

будет применяться к 2-му уровню и далее. 

#nav > ul.menu > li > ul.sub-menu > li {}

будет применяться только ко 2-му уровню ...

...