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

我有一堆无序的列表元素，它们并排堆叠在一起。为此，通常应用的样式规则为：

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

我需要介绍另一个无序的元素列表，它们的行为方式与

ul

和

li

元素通常的行为方式相同；堆叠在彼此的顶部但没有任何列表样式类型，为此：

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

问题是ul，li的stack类的样式不适用，元素堆叠在一起，就像ul，li的#slide一样

在这个js小提琴上查看它：

我的选择器错了吗

---

附言：我已经用class/id和两者的各种组合尝试过了，但结果总是一样的。

你的CSS应该是这样的

ul.stack li{
  display:block;
}
ul#slide li{
  float:left;
}

---

​

我想你想要的是：

ul.stack li{
  display:block;
}
ul#slide li{
  float:left;
}

---

看看选择器。您希望选择一个具有类堆栈（ul.stack）的ul并找到它的子li。

因为选择器中有逗号，所以您将float left应用于所有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;   
}

要素1
要素2




要素3
要素4

#幻灯片李{
显示：内联；
}

此css将使div“slide”中的所有列表元素显示在一行中，所有其他列表元素将继续正常显示。它使您不必使用两个不同的类：）

---

​

您的选择器有问题。同一元素的类或id从不被空格分隔。他们应该没有空间，孩子们被一个空间隔开，但是没有'，'将不会在那里使用。。 所以你可以在你的代码中试试这个

ul.stack li{
display:block;
}
ul#slide li{
float:left;
}

---

此外，还必须先放置HTML标记名，然后再放置前面的属性

问题是您选择的ul是slide的后代，但是您的ul具有slide的id，因此它不起作用，因为没有ul具有id为slide的容器。同样，通过放置

，li

，您可以选择页面上的所有列表项。您希望有

#slide li

，它将只选择容器id为

slide

的列表项。您不需要幻灯片ul，因此您的最终代码应该是

#slide li {
float:left;
}

或者，您可以使用类型（2）的

ul:nth

而不是id来在html中节省一些空间

---

好的，但是如果ul元素堆叠在一个div中呢？例如，我们有类似于

的东西，只要您在ul元素上放置正确的类或id，或者您可以对其进行不同的更改，它就应该可以工作occur@Parijat卡莉亚，你拿到了吗？