html - 对不同的元素应用不同的样式规则

Question

我有一堆彼此并排堆叠的无序列表元素。为此，通常应用的样式规则是:

#slide ul,li{
float:left;
list-style-type:none;
}

我需要介绍另一个无序列表的元素，它们的行为方式与 ul 和 li 元素通常的行为方式相同；彼此堆叠但没有任何列表样式类型，并实现此目的:

.stack ul,li{
list-style-type:none
}
​

问题是 ul,li 的堆栈类样式不适用，元素彼此相邻堆叠，就像在 #slide 的 ul,li 中一样。

在这个 js fiddle 上查看:

http://jsfiddle.net/G7JHK/

我的选择器错了吗？

P.S:我已经用 class/id 和两者的各种组合尝试过这个，但结果总是一样的。

Answer 1

由于选择器中的逗号，您将向左浮动应用于所有 li 元素。尝试这样的事情:

<ul class="stack">
<li>element 1</li>
<li>element  2</li>
</ul>
<br/>
<ul id="slide">
<li>element 3</li>
<li>element  4</li>
</ul>


#slide li{
 display:inline;   
}

此 css 将使 div“幻灯片”中的所有列表元素连续显示，所有其他列表元素将继续正常显示。它使您不必使用两个不同的类:)