html - 样式的第一个孩子（不是子不添加 ID 或类）

Question

**谢谢您的回答。我正在等待删除缓存插件，然后才能测试并确认一切正常。

我有一个包含一些子列表的无序列表。我要更新的是主要<ul>“名称”和“工作”的孩子

<ul>
   <li>Names
        <ul>
            <li>Mike</li>
            <li>Bob</li>
            <li>Steve</li>
        </ul>
   </li>

   <li>Jobs
        <ul>
            <li>Police</li>
            <li>Fire Fighter</li>
            <li>banker</li>
        </ul>
   </li>
</ul>

我希望能够只<li>设置我主要的 child<ul>而不是任何子项目的样式。诀窍是我不能将任何类或 id 添加到列表或子列表中。我可以把整个东西放在一个包含的 div 中。

*注意，如果我向我添加一个类或 ID，它会将其添加到所有这些。这是我无法控制的预制模板。

我在想我可以这样做：

<div id="mylist_container">
    <ul>
       <li>Names
            <ul>
                <li>Mike</li>
                <li>Bob</li>
                <li>Steve</li>
            </ul>
       </li>

       <li>Jobs
            <ul>
                <li>Police</li>
                <li>Fire Fighter</li>
                <li>banker</li>
            </ul>
       </li>
    </ul>
</div>

并像这样设计它：

#mylist_container ul>l1{
    font:bold 18px arial;
}

Answer 1

我想你回答了你自己的问题！或者至少 99% 的方式。通过添加>between#mylist_container和创建另一个子选择器ul。这只会针对 aul的子级，#mylist_container而不会深入到结构中。

#mylist_container > ul > li { /* your styles */ }

Answer 2

尝试

#mylist_container > ul > li {
    font: bold 18px arial;
}
#mylist_container > ul > li ul{
    font: normal 10px arial; //assign the default view here
}

演示：小提琴

Answer 3

看看我的代码示例。第一个针对 all <li>，第二个针对<li>another 内部<li>。

ul>li{
  any styles in here form the top level li
}

ul>li>ul>li{
  styles to cancel out the first styles
}

Answer 4

尝试这个..

div ul li ul li{
    color:#000000;
}

div ul li{
    color:red;
}

http://jsfiddle.net/Mk3g4/