如何在嵌套列表样式中分隔样式? [英] How to separate styles in a nested list styling?

问题描述

我有一个列表，列表中也有列表.
我在父列表上设置了样式，但我希望父列表和子列表的样式不同，但它们以某种方式混合在一起，我无法将它们分开.

HTML 文件:

<li><a href="#">Something</a></li><li id="userNavigation"><img src="https://si0.twimg.com/profile_images/135460415/UAB_dragon_head_normal.png" alt=""/><a href="#">用户名</a><div class="showme"><ul id="userNavigationSubMenu"><li>测试</li><li>测试</li><li>测试</li><li>测试</li><li>测试</li><li>测试</li><li>测试</li>

CSS 文件:

body{background:#ff0000;}#accountNavigation{ list-style: none;float: right;height: 44px;}#accountNavigation li{ float: left;color: #fff;height: 44px;}#accountNavigation li:hover{ 背景:#ddd；光标:指针；}#accountNavigation li a{ text-decoration: none;color: #fff;line-height: 44px;font-weight: bold;font-size: 13px;height: 44px;padding: 15px 27px 0 14px;outline: none;}#accountNavigation li img{ position: absolute;top: 12px;left: 10px;width: 22px;height: 22px;}#userNavigation{位置:相对；}#userNavigation a {padding-left: 38px !important;}#userNavigation{}#userNavigation:悬停{}#userNavigation:hover .showme{display: inline;}.给我看看{显示:无；宽度:140px；高度:200px；背景:#f5f5f5；边距:0px 自动；填充:10px 5px 0px 5px；边框:1px 实心#ddd；边框顶部:无；z-索引:10；位置:绝对；右:0;顶部:自动；}#userNavigation ul { 列表样式:无；}

这是fiddle.

解决方案

只需使用 > 直接/直接后代组合器和 id 来指定哪个 li(或 ul)您要定位的元素:

#accountNavigation {/* 外部 ul 元素 */}#accountNavigation >li {/* 外部 ul 元素的子元素 li */}#accountNavigation >立>ul {/* 第一个内部"ul 元素 */}#accountNavigation >立>升 >li {/* 第一个内部"ul 元素的 li 子元素 */}

当然，您可以更通用，只需使用:

ul {/* 目标所有 ul 元素 *//* 通用样式 */}ul li {/* 以 ul 中的所有 li 元素为目标 *//* 通用样式 */}ul li ul {/* 以 li 元素内的所有 ul 元素为目标，自身在 ul 内 *//* 否决一般的外部"样式 */}ul li ul li {/* 以 ul 元素内的所有 li 元素为目标，在 li 元素中，本身在 ul 中...等等 *//* 否决一般的外部"样式 */}

使用一般方法:

<li>这应该是绿色的！</li><li>这也是绿色的...<ul><li>但这不是，它是，嗯...蓝色！</li><li>等等...</li></ul></li><li>这也是绿色的，只是因为.</li>

以下 CSS 应演示其用法:

ul li {颜色:绿色；/* 常规"/默认"设置 */左边距:10%；}ul li ul li {颜色:蓝色；/* 这会覆盖常规"颜色设置 *//* 然而，边距不会被覆盖 */}

JS Fiddle 演示.

参考文献:

• CSS 选择器(第 3 级)，位于 W3.org.

I have a list and list also has list in it.
I set styles on parent list but I want different styles for parent and child list but they are mixed somehow I can't separate them.

HTML file:

<ul id="accountNavigation">
  <li><a href="#">Something</a></li>                    
  <li id="userNavigation">
    <img src="https://si0.twimg.com/profile_images/135460415/UAB_dragon_head_normal.png" alt=""/>
    <a href="#">Username</a>
    <div class="showme">
      <ul id="userNavigationSubMenu">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>

      </ul>
    </div>
  </li>
</ul>

CSS file:

body{background:#ff0000;}
#accountNavigation{ list-style: none;float: right;height: 44px;}
#accountNavigation li{ float: left;color: #fff;height: 44px;}
#accountNavigation li:hover{ background: #ddd;cursor: pointer;}
#accountNavigation li a{ text-decoration: none;color: #fff;line-height: 44px;font-weight: bold;font-size: 13px;height: 44px;padding: 15px 27px 0 14px;outline: none;}
#accountNavigation li img{ position: absolute;top: 12px;left: 10px;width: 22px;height: 22px;}
#userNavigation{position: relative;}
#userNavigation a {padding-left: 38px !important;}

#userNavigation{}
#userNavigation:hover{}
#userNavigation:hover .showme{display: inline;}
.showme
{
  display: none;
  width: 140px;
  height: 200px;
  background: #f5f5f5;
  margin: 0px auto;
  padding: 10px 5px 0px 5px;
  border: 1px solid #ddd;
  border-top: none;
  z-index: 10;
  position: absolute;
  right:0;
  top: auto;

}
#userNavigation ul { list-style: none;}

This is fiddle.

解决方案

Simply use the > direct/immediate descendant combinator, and an id to specify which li (or ul) elements you're targeting:

#accountNavigation { /* outer ul element */
}

#accountNavigation > li { /* outer ul element's children li */
}

#accountNavigation > li > ul { /* first 'inner' ul element */
}

#accountNavigation > li > ul > li { /* first 'inner' ul element's li children */
}

You can, of course, be more generic and simply use:

ul { /* targets all ul elements */
    /* general styles */
}
ul li { /* targets all li elements within a ul */
    /* general styles */
}
ul li ul { /* targets all ul elements within an li element, itself within a ul */
    /* overrule general 'outer' styles */
}
ul li ul li { /* targets all li elements within a ul element,
                 within an li element, itself within a ul...and so on */
    /* overrule general 'outer' styles */
}

Using the general approach:

<ul>
    <li>This should be green!</li>
    <li>This is also green...
        <ul>
            <li>But this is not, it's, um...blue!</li>
            <li>And so on...</li>
        </ul></li>
    <li>This is green too, just because.</li>
</ul>

The following CSS should demonstrate its use:

ul li {
    color: green; /* the 'general'/'default' settings */
    margin-left: 10%;
}

ul li ul li {
    color: blue; /* this overrides the 'general' color setting */
                 /* the margin is not overridden however */
}​

JS Fiddle demo.

References:

• CSS Selectors (Level 3), at the W3.org.

这篇关于如何在嵌套列表样式中分隔样式?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！