Html 如何在嵌套列表样式中分隔样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12787342/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to separate styles in a nested list styling?
提问by 1110
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:
HTML文件：
<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:
CSS文件：
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.
这是小提琴。
回答by David says reinstate Monica
Simply use the >direct/immediate descendant combinator, and an idto specify which li(or ul) elements you're targeting:
只需使用>直接/直接后代组合器和 anid来指定您要定位的li（或ul）元素：
#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:
以下 CSS 应演示其用法：
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 */
}?
References:
参考：
回答by Kevin Boucher
Have you tried CSS child-selectors?
您是否尝试过 CSS 子选择器？
ul { /* parent list styles here */ }
ul > li > ul { /* child list styles here */ }
回答by Rahul R.
回答by Logics
The solutions given here will work, but too much typing. Due to how selectors work in CSS3, it may be simplified thusly,…
这里给出的解决方案会起作用，但打字太多。由于选择器在 CSS3 中的工作方式，它可能会被简化，......
/* list styles */
/* ordered lists */
ol { list-style-type: decimal;}
ol ol { list-style-type: upper-alpha;}
ol ol ol {list-style-type: upper-roman;}
ol ol ol ol {list-style-type: lower-alpha;}
ol ol ol ol ol {list-style-type: lower-roman;}
ol ol ol ol ol ol {list-style-type: lower-greek;}
/* ordered and unordered lists */
li { color: red; }
li li { color: orange; }
li li li { color: darkgoldenrod; }
li li li li { color: green; }
li li li li li { color: blue; }
li li li li li li { color: indigo; }
Throwing the “li”s between the “ol”s —and vice-versa— are redundant, and may be omitted.
在“ol”之间扔“li”——反之亦然——是多余的，可以省略。
Furthemore, since the list items will inherit the properties of the ordered/unordered list, the second set may be just as easily done with “ul” istead, (but then, not applied to ordered lists).
此外，由于列表项将继承有序/无序列表的属性，第二组可能同样容易用“ul”代替，（但是，不适用于有序列表）。
/* unordered lists */
ul {
list-style-type: circle;
color: red;
}
ul ul {
list-style-type: disc;
color: orange;
}
ul ul ul {
list-style-type: square;
color: darkgoldenrod;
}
This is a generic answer, (since the question is very old, and I surmise that the specific use case has been settled).
这是一个通用的答案，（因为这个问题很老了，我推测具体的用例已经解决了）。
