0

我遇到了一些麻烦，我相信这个看似微不足道的问题有一个简单的解决方法。

我的 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

4

2 回答 2

5

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

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;
}
于 2013-04-02T23:45:19.763 回答
1

您的示例根本没有任何兄弟姐妹，但是根据您的描述，您甚至不想使用兄弟姐妹选择器（兄弟姐妹是层次结构中同一级别的元素）。基本上，如果您删除所有+s，您所拥有的将起作用，但您还需要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/

于 2013-04-02T23:44:27.443 回答