Html 如何在 UL 类的 LI 中为 DIV 设置 CSS 规则？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16037226/
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 set CSS rule for a DIV in a LI of class UL?
提问by bonny
I have a list of results from a query. That list will be displayed like that:
我有一个查询结果列表。该列表将显示如下：
<ul class="result">
<li></li>
<li></li>
<li></li>
...
</ul>
Now I would like to add something like a layer like li:beforeor a DIV into li.
现在我想li:before在li.
So I thought it would possible to do it like that:
所以我认为可以这样做：
<ul class="result">
<li><div id="a"></div></li>
<li><div id="a"></div></li>
<li><div id="a"></div></li>
...
</ul>
The problem is that I can not set any CSS rule for this?
问题是我不能为此设置任何 CSS 规则？
I tried:
我试过：
.wrapper #header #navline #searchbar .dropdown .result li#a{
background-color: #fff;
height: 10px;
width: 15px;
}
as well as
也
.wrapper #header #navline #searchbar .dropdown .result li #a{...}
and just
只是
.wrapper #header #navline #searchbar .dropdown .result #a{...}
but nothing worked. Is there a mistake in my thoughts or is it not possible to add a DIVinto li's?
但没有任何效果。是我的想法有误还是无法将 a 添加DIV到li's 中？
回答by Jakub Michálek
A) Use unique IDs for you elements
A)ID为您的元素使用 unique s
B) Your CSS selectors are way too complicated
B) 你的 CSS 选择器太复杂了
C) It should be .result li #abecause .result li#awould mean thats the lis have the ID
C）应该是.result li #a因为.result li#a这意味着lis 有 ID
D) When you use classes for the divsuch as:
D）当您使用类时，div例如：
<ul class="result">
<li><div class="aDiv"></div></li>
<li><div class="aDiv"></div></li>
<li><div class="aDiv"></div></li>
<li><div class="aDiv"></div></li>
</ul>
your selector should look like this
你的选择器应该是这样的
.result li .aDiv {
/* CSS styles */
}
or, if necessary (you only want to tagret <ul class="result">inside a specific element#someId), you can use a little bit more complicated selector:
或者，如有必要（您只想<ul class="result">在特定的 中标记element#someId），您可以使用更复杂的选择器：
#someId .result li .aDiv {
/* CSS styles */
}
however, chaining ID selectors is redundant:
然而，链接 ID 选择器是多余的：
#someId #someOtherId #finallyThere .result li .aDiv {
/* CSS styles */
}
because, as mentioned before, IDs are unique
因为，如前所述，ID 是唯一的
回答by BenM
Update your markup as follows (because IDs should be unique, you can use classnames instead):
按如下方式更新您的标记（因为 ID 应该是唯一的，所以您可以使用类名）：
<ul class="result">
<li><div class="a"></div></li>
<li><div class="a"></div></li>
<li><div class="a"></div></li>
...
</ul>
Your CSS selector should then look like this:
您的 CSS 选择器应如下所示：
.wrapper #header #navline #searchbar .dropdown .result li .a {
}
回答by enhzflep
You haven't given all of the html that encloses the above, so this may need further refinement for your requirements.
您尚未提供包含上述内容的所有 html，因此可能需要根据您的要求进一步细化。
<!DOCTYPE html>
<html>
<head>
<style>
ul.result li div#a{ color: red; }
ul.result li div#b{ color: green; }
ul.result li div#c{ color: blue; }
</style>
</head>
<body>
<ul class="result">
<li><div id="a">This is red</div></li>
<li><div id="b">This is green</div></li>
<li><div id="c">This is blue</div></li>
</ul>
</body>
</html>
回答by DiederikEEn
instead of: <li><div id="a"></div></li>use <li><div class="a"></div></li>and then you only thing you should do is: .result li{style this thing}
而不是：<li><div id="a"></div></li>使用<li><div class="a"></div></li>然后你唯一应该做的是：.result li{style this thing}
回答by Srdjan Dejanovic
You can not have the same id for every div. So, you have to add class.
您不能为每个 div 使用相同的 id。所以，你必须添加类。
