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

【问题标题】：How to apply different CSS styles to 2 elements with the same class name?如何将不同的 CSS 样式应用于具有相同类名的 2 个元素？
【发布时间】：2019-04-10 17:20:45
【问题描述】：

我创建了一个具有不同导航菜单的网站。在 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 并以某种方式作为选择器吗？

再一次，如果可能的话，我根本不想删除类名。

谢谢！

【问题讨论】：

这些菜单是否包含在其他可能包含类的 HTML 结构中？
@lucuma，是的，这就是它困难的原因
父类是不同的还是相同的html？

标签： css html

【解决方案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 中的位置。

【讨论】：

2.html中的元素有多个嵌套类，这些类是该类的父、祖父等。 1.html 中的另一个元素只有 1 个父类。
只要其中一个父类在两者之间不同，第二个代码集就可以工作。我已将其重命名为祖先 1 和祖先 2，希望能更清楚一点。

【解决方案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

【讨论】：

对，但我不想重命名类名。我喜欢保持原样。我可以为其中一个元素添加另一个类名属性吗？
我们没有重命名类名。我们只是为元素添加另一个类。
我可以为具有相同类名的元素中的 1 个添加第二个类名，还是两个具有相同类名的元素都需要第二个类名才能工作？
您可以向其中一个元素添加另一个类：参见jsfiddle.net/2499Z

【解决方案3】：

你也可以这样做：

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

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

.classname:not(.second) {}

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

.classname.second {}

【讨论】：

不需要.classname:not 中的:not，因为.classname.second 的特异性高于.classname。
是的，如果您需要对第一个元素使用规则集。
那我就重写.classname.second中的属性

【解决方案4】：

给每个人一个不同的id

#firsthtml .classname {  

}

#sechtml .classname { 

}

一定要使用空格，因为#firsthtml.classname 是完全不同的东西。

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

你也可以使用两个不同的类名

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

在你的 css 中定义 secondclassname 和额外的 css

.classname.secondclassname{

}

【讨论】：

如果我不想触及 1.html 中的属性，而只关注 2.html 中的元素怎么办？我可以添加
一些其他代码
吗？然后像你说的那样访问它？
是的。你可以这样做。只需将 id 添加到 2.html div 并将 CSS 添加到那个。
嗯，由于某种原因，当我这样做时，包含该元素的“活动”菜单会冻结，我无法访问任何其他导航菜单。这与我使用引导程序有关吗？
查看源代码将帮助我更好地理解您的问题。是的，引导程序确实起到了很大的作用，但它可能非常简单。需要明确的是，您知道您可以创建一个辅助 css 文件并在其中正确编辑吗？这样你就不会弄乱引导 css 结构了吗？
如果您将 ID 和类附加到同一个元素，则选择器不应有空格。您还缺少双类选择器中的领先 .（您正确地省略了空格）。

【解决方案5】：

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

第一个菜单：

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

二级菜单：

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

【讨论】：