如何在 UL 类的 LI 中为 DIV 设置 CSS 规则？答案

【问题标题】：How to set CSS rule for a DIV in a LI of class UL?如何在 UL 类的 LI 中为 DIV 设置 CSS 规则？
【发布时间】：2013-04-16 12:35:25
【问题描述】：

我有一个查询结果列表。该列表将显示如下：

<ul class="result">
    <li></li>
    <li></li>
    <li></li>
    ...
</ul>

现在我想在li 中添加像li:before 这样的层或DIV。

所以我认为可以这样做：

<ul class="result">
    <li><div id="a"></div></li>
    <li><div id="a"></div></li>
    <li><div id="a"></div></li>
    ...
</ul>

问题是我不能为此设置任何 CSS 规则？

我试过了：

.wrapper #header #navline #searchbar .dropdown .result li#a{
    background-color: #fff;
    height: 10px;
    width: 15px;
}

还有

.wrapper #header #navline #searchbar .dropdown .result li #a{...}

只是

.wrapper #header #navline #searchbar .dropdown .result #a{...}

但没有任何效果。是我的想法有误，还是无法将DIV 添加到li 中？

【问题讨论】：

你试过没有.result之前的所有东西吗？或 ul 。结果李#count
#count 是一个错字。我已经更新了。对不起

标签： html css class

【解决方案1】：

A) 为您的元素使用唯一的IDs

B) 你的 CSS 选择器太复杂了

C) 应该是.result li #a，因为.result li#a 意味着lis 有ID

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>

你的选择器应该是这样的

.result li .aDiv {
    /* CSS styles */
}

或者，如果有必要（你只想在特定的element#someId 中标记<ul class="result">），你可以使用稍微复杂一点的选择器：

#someId .result li .aDiv {
    /* CSS styles */
}

但是，链接 ID 选择器是多余的：

#someId #someOtherId #finallyThere .result li .aDiv {
    /* CSS styles */
}

因为如前所述，ID 是唯一的

【讨论】：

您或许应该提及#someID .result li .aDiv 与.result li .aDiv 的特殊性。
不应该有更好的方法，只使用一个div吗？

【解决方案2】：

如下更新您的标记（因为 ID 应该是唯一的，您可以使用类名代替）：

<ul class="result">
    <li><div class="a"></div></li>
    <li><div class="a"></div></li>
    <li><div class="a"></div></li>
    ...
</ul>

您的 CSS 选择器应如下所示：

.wrapper #header #navline #searchbar .dropdown .result li .a {

}

【讨论】：

不应该有更好的方法，只使用一个div吗？

【解决方案3】：

而不是：<li><div id="a"></div></li> 使用 <li><div class="a"></div></li> 然后你唯一应该做的就是：.result li{style this thing}

【讨论】：

【解决方案4】：

您尚未提供包含上述内容的所有 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>

【讨论】：

【解决方案5】：

每个 div 不能有相同的 id。所以，你必须添加类。

【讨论】：