CSS3 селекторы - выберите самый первый элемент или элемент после

Question

Допустим, у a есть следующий код:

<nav id="main-navigation">
    <ul>
        <li><a href="#">Link 1 Level 1</a></li>
        <li><a href="#">Link 1 Level 1</a></li>
        <ul>
             <li><a href="#">Link 1 Level 2</a>
        </ul>
    </ul>
</nav>

А теперь я хочу установить для высоты первого ul значение 100 пикселей, а для второго ul должно быть 300 пикселей.

Когда я пытаюсь

nav ul {
     height: 100px
}

Second ul также наследует это значение.

Я пытался "~", "+", ">", первенцы и т. Д., Но неНе знаю, как это сделать, даже с документацией.

Есть ли хорошее объясненное (желательно с демонстрациями / экранами) руководство по новым селекторам css3?W3 Стол слишком занудный для меня.

Спасибо !!!

Answer 1

Просто выберите любой ul, являющийся потомком ul, и задайте ему этот стиль, если у вас будет только 2 слоя <ul> с. Нет необходимости в каких-либо специальных комбинаторах CSS2 / CSS3, поскольку <ul> не может напрямую содержать <ul>, плюс вам также не нужно беспокоиться о IE.

nav ul {
     height: 100px;
}

nav ul ul {
     height: 300px;
}

Answer 2

Чтобы выбрать прямых потомков элемента, а не любого потомка, вы должны использовать синтаксис >.В вашем случае (после помещения второго ul внутрь li) вам необходимо:

nav > ul {
     height: 100px;
}

nav > ul > li > ul {
     height: 300px;
}

Дополнительно: на самом деле не имеет смысла иметь предмет размером 300pxвнутри 100px предметаЗачем вам это нужно?

Еще один дополнительный: попробуйте прочитать документы w3c, это сэкономит вам время в долгосрочной перспективе.То, что вы не понимаете, вы всегда можете спросить на SO.

Answer 3

Во-первых, насколько важна для вас совместимость браузера?У всех упомянутых вами селекторов есть проблемы в различных версиях IE (IE8, очевидно, лучше, чем IE7, но даже в IE8 отсутствует множество CSS-селекторов)

Простые вложенные селекторы (т.е. просто пробел между именами CSS) будет работать для вас - хотя, как вы говорите, установка nav li {height:100px;} устанавливает его для всех LI, вы можете переопределить это с помощью nav li li {height:300px;}, чтобы установить внутренний обратно так, как вы этого хотите.

Если выЕсли вы хотите использовать «правильные» селекторы, вам нужен >.

nav>ul>li {
    height:100px;
}

Это повлияет только на внешние элементы LI, но не на внутренние.Однако, как я уже сказал, он не будет работать в более старых версиях IE (к счастью, он работает в IE7 и более поздних версиях, поэтому проблема заключается только в том, если вы хотите поддерживать IE6).

Вы говорите, что вынашел различные селекторы довольно трудно понять.Я рекомендую вам посетить Quirksmode .Для начала у него есть очень удобная таблица совместимости, показывающая, какие браузеры поддерживают какие селекторы, но также есть отличные примеры того, как работает каждый селектор, что должно помочь вам понять их немного лучше.