CSS, влияет только на верхний список ul?

Question

У меня есть вложенный список навигации UL, где ul содержится в некоторых других элементах li. вот наценка:

<ul class="navigation">
  <li><a href="#">No Chidren</a></li>
  <li><a href="#">With Chilren</a>
      <ul>
        <li><a href="#">Child 1</a></li>
        <li><a href="#">Child 2</a></li>
      </ul>
  </li>
</ul>

Я попытался оформить его с помощью следующих объявлений CSS:

.navigation { 
 //stylings
}

.navigation li{ 
 //stylings
}

.navigation li a{ 
 //stylings
}

.navigation li a:hover{ 
 //stylings
}

но .navigation li влияет на все элементы списка, включая дочерние. есть ли способ нацелить на lis, чтобы стили применялись только к верхним уровням, а не к дочерним элементам?

Answer 1

Как уже упоминалось, селектор > будет выбирать только прямых потомков.Однако это не работает в IE 6 .

. Если вам требуется поддержка IE 6, вы можете добавить класс для дочерних ul s или li s и использоватьчтобы убрать каскадный стиль сверху li:

<ul class="navigation">
  <li><a href="#">No Chidren</a></li>
  <li><a href="#">With Chilren</a>
      <ul class="level1">
        <li><a href="#">Child 1</a></li>
        <li><a href="#">Child 2</a></li>
      </ul>
  </li>
</ul>

-

.navigation li{ 
    background: url(bg.png);
}

.navigation .level1 li{ 
    background: none;
}

Answer 2

Подобным образом, «>» утверждает, что li должен быть прямым потомком .navigation

.navigation { 
 //stylings
}

.navigation > li{ 
 //stylings
}

.navigation > li a{ 
 //stylings
}

.navigation > li a:hover{ 
 //stylings
}

Answer 3

Да, это возможно с дочерними селекторами .

.navigation>li>a{ 
 //stylings
}

Приведенный выше код повлияет на ссылку «Без детей» и «С детьми», но не на элемент «ребенок 1».

Вот рабочий пример: http://jsfiddle.net/VuNwX/

А здесь вы можете узнать больше о селекторах: http://css.maxdesign.com.au/selectutorial/index.htm