CSS直接后代选择器

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;
}