如何将不同的CSS样式应用于具有相同类名的2个元素？

Question

我创建了一个具有不同导航菜单的网站.在2个菜单中,我使用相同的HTML类元素.

我有一个.css文件,用于在1个菜单中设置该类元素的样式.但是,在另一个菜单中,我想以不同的方式设置元素的样式.

是的,我知道我可以重命名类名,但是为了与我现在在标记结构中所拥有的一致,以及类名用于设置多个其他元素的样式,我怎么能够将不同的样式应用于具有相同类名的2个不同元素？

可以使用CSS中的某种if语句来完成吗？

例如,在1.html中:

<div class="classname"> Some code </div>

在2.html:

<div class="classname"> Some different code </div>

因为我只想在2.html中对这个"one"元素进行不同的设置,我可以只添加一个id属性和class属性,并使用id和class以及某种方式作为选择器吗？

如果可能的话,我再也不想删除类名.

谢谢!

Answer 1

我只是添加,通常当有多个菜单时,您可能将它们包装在不同的结构中.举个例子:

<nav class='mainnav'><div class="classname one"> Some code </div></nav>

<div class='wrapper'><div class="classname"> Some different code </div></div>

您可以轻松地定位这些:

.mainnav>.classone {}
.wrapper>.classone {}

或者如果父html有一个类:

<div class='ancestor1'><div><div class="classname one"> Some code </div></div></div>
<div class='ancestor2'><div><div class="classname one"> Some code </div></div></div>

.ancestor1 .classname {}
.ancestor2 .classname {}

显然这取决于它们可能在html中的位置.

Answer 2

您可以为每个元素添加另一个类名。

<div class="classname one"> Some code </div>
<div class="classname two"> Some different code </div>

然后对他们应用不同的规则：

.classname.one {
    border: 1px solid #00f;    
}

.classname.two {
    border: 1px solid #f00;    
}

编辑：

更新演示链接：http : //jsfiddle.net/8C76m/2/

如果你必须为每个元素只保留一个类，你可以尝试nth-child或nth-of-type伪类：

.classname:first-child {
    font-size: 2em; 
}

.classname:nth-of-type(2) {
    color: #f00;
}

参考：

http://www.w3schools.com/cssref/sel_firstchild.asp和http://www.w3schools.com/cssref/sel_nth-of-type.asp