将不同的样式规则应用于不同的元素

Question

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

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

我需要引入另一个无序的元素列表,其行为ul与li元素通常的行为方式相同; 这是堆叠在彼此之上但没有任何list-style-type,并实现此目的:

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

问题是ul,li的堆栈类的样式不适用,并且元素彼此叠加,因为它们是针对#slide的ul,li的情况.

看看这个js小提琴:

http://jsfiddle.net/G7JHK/

我的选择者错了吗？

PS:我用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'slide'中的所有列表元素显示为一行,所有其他列表元素将继续显示为正常.它可以节省你必须使用两个不同的类:)