1

说这是我的设置：

<ul id="filters">
    <li><a href="#">Any distance</a></li>
    <li><a href="#">10 km</a></li>
    <li><a href="#">30 km</a></li>
    <li><a href="#">50 km</a></li>
</ul>

在我的 css 中，我如何根据它所在的 UL 设置我的列表样式？我试过这个：

#filters ul li {
    padding: 10px;
}

但我没有任何运气，同样有几个不同的变化。我知道这是一个基本问题，但我仍在学习。

4

6 回答 6

4

您的选择器不适合您要实现的目标：

#filters ul li {
    padding: 10px;
}

#filters ul li将选择li作为ula 的后代的元素，它是带有 的元素的后代id="filters"。

你要：

#filters li {
    padding: 10px;
}
于 2013-05-24T18:00:20.217 回答
1

你只是想要：

#filters li {
    padding: 10px;
}

它目前不起作用的原因是因为它说ulINSIDE 带有 ID 的元素#filters。（例如<div id="filters"><ul>...）

另一种设置列表样式的正确方法是ul#filters li. 这表示您想要一个ulID 为“过滤器”的元素。但这是不必要的，因为您只能拥有一个 ID 为“过滤器”的元素。

于 2013-05-24T18:00:35.490 回答
1

你的选择器是错误的。

以下是一些可以正常工作的替代选择器：

ul#filters li {
    padding: 10px;
}

上述选择器将适用于任何具有 ID 'filter' 的 UL 元素的 LI 元素。此选择器具有最高的特异性（在给定的上下文中）。这是一篇关于特异性的好文章http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

#filters li {
     padding: 10px;
}

上述选择器将应用于 ID 为“filter”的元素的 LI 元素。

#filters * {
    padding: 10px;
}

上述选择器将应用于具有 ID 'filter' 的元素的任何元素。我不建议您使用它，但您可以这样做，因为根据 W3C，UL 元素必须后跟 LI 元素。

于 2013-05-24T19:12:55.100 回答
0

#filters就是它本身ul，你必须像这样选择孩子：

ul#filters li {
    padding: 10px;
}

但是，由于 ID 是唯一的，您可以省略ul：

#filters li {
    padding: 10px;
}
于 2013-05-24T18:33:45.350 回答
0

试试这个：

#filters li {
    padding: 10px;
}
于 2013-05-24T18:39:30.887 回答
-2

它需要是

ul#filters li{some code}

您将 id 或 class 放在元素名称之后。

或者干脆

#filters li{your code}

于 2013-05-24T18:00:32.243 回答