css - 对同一类中的不同元素应用不同的css

Question

我想知道是否可以对同一类中的不同元素应用不同的 css 设置。

例如我有<li>我想对#city、#state 和#zipcode 应用不同的前景颜色，但我想在同一个类中实现这一点。

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

我想要类似的东西-

.className{
     here is css for city;
     here is css for state;
     here is css for zipcode;
}

Answer 1

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

您可以简单地使用 id选择器:

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

如果您想按类别指定，那么假设您的 <li>有一类 className你可以使用一些伪选择器来访问 child

演示: http://jsfiddle.net/8qAvb/

HTML

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

CSS

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