Question

说这是我的设置：

<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;
}

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

Answer 1

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

#filters ul li {
    padding: 10px;
}

#filters ul li将选择li元素，这些元素是ul的后代，后者是id="filters"元素的后代。

你想：

#filters li {
    padding: 10px;
}

Answer 2

你只想：

#filters li {
    padding: 10px;
}

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

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

Answer 3

你的选择器错了。

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

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“过滤器”的元素的任何元素。我不建议你使用它，但你可以因为根据W3C必须在UL元素后面跟着LI元素。

Answer 4

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

ul#filters li {
    padding: 10px;
}

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

#filters li {
    padding: 10px;
}

Answer 5

请改为尝试：

#filters li {
    padding: 10px;
}

Answer 6

需要

ul#filters li{some code}

您将id或类放在元素名称后面。

或只是

#filters li{your code}

在UL中定制特定列表

6 个答案: