3

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

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

现在我想li:beforeli.

所以我认为可以这样做:

<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' lis 中添加一个?

4

5 回答 5

10

IDA)为你的元素使用 unique s

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 */
}

或者,如果有必要(你只想<ul class="result">在一个特定的内部添加 tagret element#someId),你可以使用更复杂的选择器:

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

但是,链接 ID 选择器是多余的:

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

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

于 2013-04-16T12:38:31.290 回答
3

按如下方式更新您的标记(因为 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 {

}
于 2013-04-16T12:40:12.390 回答
1

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

于 2013-04-16T12:38:53.087 回答
1

您还没有提供包含上述内容的所有 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>
于 2013-04-16T12:51:59.550 回答
0

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

于 2013-04-16T12:39:45.677 回答