Как исключить стили для некоторых конкретных элементов с помощью css?

Question

<div id="header" class="top-bar"> 
... 
</div> 

<div id="specificdiv" class="top-bar"> 
    <ul> 
     <li> 
      <li class="dropdown active"> 
      <li class="dropdown active"> 
      <li class="dropdown active"> 
     <li> 
    </ul> 
</div> 

<div id="footer" class="top-bar"> 
... 
</div> 

Мне нужно исключить стиль для конкретных <li> тегов под div id="specificdiv". я мог исключить первый элемент с помощью этого

.top-bar li:not(:first-of-type) { 
    float: none; 
} 

, но как удалить остальные 2, а?

Answer 1

Используйте переключатель прямого потомка >. Он выбирает только непосредственных потомков целевых родителей.

Вы можете использовать #specificdiv ul > li, и он будет выбирать только ли на первом уровне детей.

И как указал BoltClock, вы должны обернуть li, чей родитель является li внутри ul.

<div id="specificdiv" class="top-bar"> 
    <ul> 
    <li> 
     <ul> 
     <li class="dropdown active"> 
     <li class="dropdown active"> 
     <li class="dropdown active"> 
     </ul> 
    <li> 
    </ul> 
</div> 

Answer 2

для этого вам нужно п-й ребенок (ап + б) вы можете использовать его как этот

li:nth-child(2){ 
    .. 
} 
li:nth-child(3){ 
    .. 
} 

теперь вы ВПО много альтернативных

ul li:nth-child(3n+3) { 
    color: #ccc; 
} 



li:nth-child(4n-7) { /* or 4n+1 */ 
    color: green; 
} 

и если вы хотите проверить специальные lis, используя > вот так

div#pecificdiv ul.myList >li:nth-child(odd) { 
    color: green; 
} 

проверить ссылку на полезную-го ребенка рецепты

http://css-tricks.com/useful-nth-child-recipies/

и этот

http://css-tricks.com/how-nth-child-works/

Answer 3

Почему вы не просто добавить класс для <li>, что вы хотите стиль ? Пример:

<ul> 
    <li class="someClass"> 
     <li class="dropdown active"> 
     <li class="dropdown active"> 
     <li class="dropdown active"> 
    <li> 
</ul> 

И тогда ваш стиль:

.someClass{ 
    float:none; 
    } 

Answer 4

#specificdiv li:not(:first-of-type) 
{ 
    float: none; 
} 

он будет работать.

# используется для выбора элемента по идентификатору. Например, #my выберет элемент с id = my