Question

我遇到了一些麻烦，我确信这个看似简单的问题有一个简单的解决办法。

我的HTML页面设置如下：

<ul class="locations">
   <li>
      Georgia
      <ul class="children">
         <li>
            Fulton County
            <ul class="children">
               <li>
                  Atlanta
               </li>
            </ul>
         </li>
      </ul>
   </li>
</ul>

我试图用一种方式设置“父母”列表项目的样式，单向设置“子项”，另一种方式设置“孙子”。

我尝试了以下内容：

ul li{
    list-style: none;
    margin: 0;
}
ul.locations li+ul.children li{
    margin-left: 15px;
    clear: both;
}
ul.locationsli+ul.children li+ul.children li{
    float: left;
}

我希望这个例子中的“孙子”彼此浮动......无论我如何工作，clear:both;似乎都适用于“孩子”和“孙子”物品。我也尝试使用>作为CSS选择器而没有运气。

有关修复此问题的任何想法？ TIA

Answer 1

您将兄弟姐妹（~或+）与直接后代（>）混淆。试试这个：

jsFiddle

ul li{
    list-style: none;
    margin: 0;
}
ul.locations > li > ul.children > li{
    margin-left: 15px;
    clear: both;
}
ul.locations > li > ul.children  > li > ul.children > li{
    float: left;
}

Answer 2

您的示例根本没有任何兄弟姐妹，但根据您所描述的内容，您甚至不想使用兄弟选择器（兄弟姐妹是层次结构中同一级别的元素）。如果你删除所有+，你基本上会有什么工作，但是孙子孙女也需要clear: none。

ul li{
    list-style: none;
    margin: 0;
}
ul.locations li ul.children li{
    margin-left: 15px;
    clear: both;
}
ul.locations li ul.children li ul.children li {
    float: left;
    clear: none;
}

http://jsfiddle.net/pT8LA/

CSS直接后代选择器

2 个答案: