CSS直接后代选择器 [英] CSS direct descendent selectors

问题描述

我遇到了一些麻烦，而且我敢肯定对于这个看似琐碎的问题有一个简单的解决方法.

I'm having a little trouble and I'm sure there's a simple fix for this seemly trvial question.

我的HTML页面设置如下:

I have my HTML page setup with like the follow:

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

我正在尝试以一种方式为父母"列表项设置样式，以一种方式为子级"样式设置样式，并以另一种方式设置孙子级"样式设置.

I'm trying to style the "parents" list items one way, the "children" one way, and the "grandchildren" another way.

我尝试了以下操作:

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选择器.

Where I want the "grandchildren" in this instance to float next to each other...regardless of how I work this our, clear:both; seems to be applied to both the "children" and "grandchildren" items. I also tried using > as a CSS selector with no luck.

关于解决此问题的任何想法吗?TIA

Any ideas on fixing this? TIA

推荐答案

您正在将兄弟姐妹(〜或 + )与直接后代(>).试试这个:

You're confusing siblings (~ or +) with direct descendants (>). Try this:

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

这篇关于CSS直接后代选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！