为同一类中的不同元素应用不同的css

我想知道是否有可能为同一类中的不同元素应用不同的css设置

<li>
 <div id="city">    </div>
 <div id="state"> </div>    
 <div id="zipcode"></div>
</li>

e、 g.我有

，我想对#城市#州和#zipcode应用不同的前景色，但我想在同一个类中实现这一点

<li>
 <div id="city">    </div>
 <div id="state"> </div>    
 <div id="zipcode"></div>
</li>

---

我真的不知道你为什么要这样做

您只需使用

id

选择器即可：

#city    { background-color: red;   }
#state   { background-color: green; }
#zipcode { background-color: blue;  }

如果要按类指定，则假设您的

有一个

className

类，则可以使用多个伪选择器访问子类

演示：

HTML

---

为不同的ID应用特定的样式。仅在css中不可能在类内部添加样式，但您可以查看诸如sass/scss或更少的预处理器。Google

css:nth-child（）

不同的颜色到不同的元素，但在同一选择器中？我想为这组

应用不同的主题，所以我想我只能创建一个包含所有css的类并使用它。似乎它不可能与css。谢谢你的回答和时间。

<li class="className">
    <div id="city">city</div>
    <div id="state">state</div>
    <div id="other1">other1</div>
    <div id="other2">other2</div>
    <div id="other3">other3</div>
    <div id="other4">other4</div>
    <div id="zipcode">zipcode</div>
</li>

.className > div {
    background-color: green;
}
.className > div:first-child {
    background-color: red;
}
.className > div:nth-child(3) {
    background-color: lime;
}
.className > div:nth-child(4) {
    background-color: pink;
}
.className > div:nth-child(5) {
    background-color: orange;
}
.className > div:last-child {
    background-color: blue;
}