Html 如何将不同的 CSS 样式应用于具有相同类名的 2 个元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24771055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to apply different CSS styles to 2 elements with the same class name?
提问by user1631224
I created a website that has different navigation menus. In 2 menus, I use the same HTML class element.
我创建了一个具有不同导航菜单的网站。在 2 个菜单中，我使用相同的 HTML 类元素。
I have a .css file that styles that class element in 1 menu. However, in another menu, I would like to style the elements differently.
我有一个 .css 文件，该文件在 1 个菜单中为该类元素设置样式。但是，在另一个菜单中，我想以不同的方式设置元素的样式。
Yes, I know I can rename the class name, but to be consistent with what I have right now in the structure of my markup, and also the fact that the class name is used to style multiple other elements, how would I be able to apply different styles to 2 different elements with the same class name?
是的，我知道我可以重命名类名，但是为了与我现在标记结构中的内容保持一致，以及类名用于设置多个其他元素的样式这一事实，我将如何能够将不同的样式应用于具有相同类名的 2 个不同元素？
Can this be done using some kind of if statement condition in CSS?
这可以使用 CSS 中的某种 if 语句条件来完成吗？
For example, in 1.html:
例如，在 1.html 中：
<div class="classname"> Some code </div>
In 2.html:
在 2.html 中：
<div class="classname"> Some different code </div>
Since I just want to style this "one" element differently in 2.html, can I just add an id attribute along with the class attribute, and use both the id and class and somehow as the selector?
由于我只想在 2.html 中以不同的方式设置这个“one”元素的样式，我是否可以只添加一个 id 属性以及 class 属性，并同时使用 id 和 class 并以某种方式作为选择器？
Once again, I would not like to remove the class name at all, if possible.
再一次，如果可能的话，我根本不想删除类名。
Thanks!
谢谢！
回答by lucuma
I'll just add that typically when there are multiple menus you might have them wrapped in a different structure. Take for instance:
我只会补充一点，通常当有多个菜单时，您可能会将它们包装在不同的结构中。举个例子：
<nav class='mainnav'><div class="classname one"> Some code </div></nav>
<div class='wrapper'><div class="classname"> Some different code </div></div>
You can easily target these:
您可以轻松定位这些：
.mainnav>.classone {}
.wrapper>.classone {}
Or if the parent html has a class:
或者如果父 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 {}
Obviously this depends on where in the html they might be.
显然，这取决于它们可能在 html 中的位置。
回答by Chris Lam
You can add another class name to each element.
您可以为每个元素添加另一个类名。
<div class="classname one"> Some code </div>
<div class="classname two"> Some different code </div>
And then aplpy different rules to them:
然后对他们应用不同的规则：
.classname.one {
border: 1px solid #00f;
}
.classname.two {
border: 1px solid #f00;
}
Edit:
编辑：
Updated Demo link: http://jsfiddle.net/8C76m/2/
更新演示链接：http: //jsfiddle.net/8C76m/2/
If you must keep only one class for each element, you may try the nth-childor nth-of-typepseudo-class:
如果你必须为每个元素只保留一个类，你可以尝试nth-child或nth-of-type伪类：
.classname:first-child {
font-size: 2em;
}
.classname:nth-of-type(2) {
color: #f00;
}
Ref:
参考：
http://www.w3schools.com/cssref/sel_firstchild.aspand http://www.w3schools.com/cssref/sel_nth-of-type.asp
http://www.w3schools.com/cssref/sel_firstchild.asp和http://www.w3schools.com/cssref/sel_nth-of-type.asp
回答by nikoloza
You can also do something like this:
你也可以这样做：
<div class="classname"> Some code </div>
<div class="classname second"> Some different code </div>
And the CSS for the first .classnamewould be something like that:
第一个的 CSS.classname应该是这样的：
.classname:not(.second) {}
For the second element it goes easily:
对于第二个元素，它很容易：
.classname.second {}
回答by Josh
Just give each one a different id
给每个人一个不同的id
#firsthtml .classname {
}
#sechtml .classname {
}
Be sure to use the space, as #firsthtml.classname is something totally different.
一定要使用空格，因为 #firsthtml.classname 是完全不同的东西。
<div class="classname" id="firsthtml"></div>
<div class="classname" id="sechtml"></div>
You could also use two different class names
你也可以使用两个不同的类名
<div class="classname secondclassname"></div>
Define secondclassname in your css with the additional css
使用额外的 css 在你的 css 中定义 secondclassname
.classname.secondclassname{
}
回答by Mindless
I know this is a poor way of doing it, the suggestions from previous answers are helpful, but try this maybe:
我知道这是一种糟糕的方法，以前答案中的建议很有帮助，但不妨试试这个：
First menu:
第一个菜单：
<div class="classname"> Some code </div>
Second menu:
第二个菜单：
<div class="classname" style="margin-bottom:0;color:Black;width:100px;height:100px"> Some other code </div>
回答by Manikanta Behera
You can do it by defining an id selector,
你可以通过定义一个 id 选择器来实现，
#test{
color: green;
}
And then applying to the required class
然后申请到所需的班级
<!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>
Cheers You have applied different style with same class name Result
干杯你用相同的类名应用了不同的风格 结果
