嵌套列表样式 - 如何分隔样式 [英] Nested list styling - how to separate styles

问题描述

我有一个列表，列表中也有列表。
$
我在父列表中设置样式，但是我不能为父级和子级列表使用不同的样式，但是我们不能混合将它们分开。

这是小提琴

I have a list and list also has list in it.
I set styles on parent list but I wan't different styles for parent and child list but thay are mixed somehow I can't separate them.
This is fiddle

推荐答案

只需使用> 直接/立即后代组合器和 id 指定您要定位的 li （或 ul ）元素： / p>

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>

以下CSS应显示其用途：

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演示。

参考资料：

• CSS选择器（第3级），在W3.org 。

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

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