如何为嵌套子列表应用不同的样式

Question

请您查看This Demo并告诉我如何将不同的样式应用到我的嵌套列表（＆gt;嵌套1.和＆gt;嵌套2）而不是它的父列表？

<div>
  <ul>
    <li><a href="#">Zurich</a></li>
    <li><a href="#">Geneva</a>
       <ul>
         <li><a href="#">Nested 1</a></li>
         <li><a href="#">Nested 2</a></li>
       </ul>
     </li>
    <li><a href="#">Winterthur</a></li>
    <li><a href="#">Lausanne</a></li>
    <li><a href="#">Lucerne</a></li>
  </ul>
</div>

Answer 1

您可以使用li li a选择这些元素。例如：

li li a {
    color:red;
}

<强> jsFiddle example

Answer 2

我会通过添加到<ul>元素的类来实现这一点，然后使用适当的css选择器来应用样式。

将该类添加到要设置样式的<ul>标记中。

<div>
  <ul>
    <li><a href="#">Zurich</a></li>
    <li><a href="#">Geneva</a>
       <ul class="styledList">
         <li><a href="#">Nested 1</a></li>
         <li><a href="#">Nested 2</a></li>
       </ul>
     </li>
    <li><a href="#">Winterthur</a></li>
    <li><a href="#">Lausanne</a></li>
    <li><a href="#">Lucerne</a></li>
  </ul>
</div>

然后，在css表中，将样式应用于该类名称，或仅应用于该列表中的<li>元素，无论适当的是什么。

申请<ul>及所有后代

.styledList {
  // css style
}

仅应用于<li>

内的<ul>

.styledList li {
  // css style
}

选择器中的.用于指定样式应用于具有该类的元素，或者您可以使用#选择器指定要应用样式的ID ，例如

<div id="styledDiv">Hello</div>

CSS

#styledDiv {
  border: 1px solid black;
}

如果您想了解有关CSS选择器的更多信息，可以查看W3文章 http://www.w3.org/TR/CSS2/selector.html 这里特别是类选择器 http://www.w3.org/TR/CSS2/selector.html#class-html