Question

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

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

现在我想在li:before中添加类似li或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？

Answer 1

A）为元素使用唯一的ID

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

C）它应该是.result li #a因为.result li#a意味着li具有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 */
}

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

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

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

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

因为，如前所述，ID 唯一

Answer 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 {

}

Answer 3

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

Answer 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>

Answer 5

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

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

5 个答案: