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>

因为我只是喜欢这个＆＃34;一个＆＃34; 2.html中的元素不同，我可以只添加一个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

Answer 3

给每个人一个不同的身份

#firsthtml .classname {  

}

#sechtml .classname { 

}

请务必使用空格，因为＃firsthtml.classname是完全不同的。

<div class="classname" id="firsthtml"></div>
<div class="classname" id="sechtml"></div>

您还可以使用两个不同的类名

<div class="classname secondclassname"></div>

使用额外的css

在css中定义secondclassname

.classname.secondclassname{

}

Answer 4

您也可以这样做：

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

第一个.classname的CSS就是这样的：

.classname:not(.second) {}

对于第二个元素，它很容易：

.classname.second {}

Answer 5

我知道这是一种糟糕的做法，以前的答案中的建议很有帮助，但尝试这个可能：

第一个菜单：

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

第二个菜单：

<div class="classname" style="margin-bottom:0;color:Black;width:100px;height:100px"> Some other code </div>

Answer 6

您可以通过定义ID选择器来做到这一点，

#test{
color: green;
}

然后申请所需的课程

<!DOCTYPE html>
<html>
<head>
<style>
.classname {
  text-align: center;
  color: red;
}
#test{
color: green;
}
</style>
</head>
<body>

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

</body>
</html>

欢呼您使用相同的班级名称应用了不同的样式 Result

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

6 个答案: