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

我创建了一个有不同导航菜单的网站。在两个菜单中，我使用相同的HTML类元素

我有一个.css文件，用于在1菜单中设置该类元素的样式。但是，在另一个菜单中，我想对元素进行不同的样式设置

是的，我知道我可以重命名类名，但是为了与我现在的标记结构保持一致，以及类名用于设置多个其他元素的样式这一事实，我如何能够对具有相同类名的两个不同元素应用不同的样式

这可以使用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作为选择器吗

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

---

谢谢

给每个人一个不同的id

#firsthtml .classname {  

}

#sechtml .classname { 

}

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

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

---

可以向每个元素添加另一个类名

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

编辑：

更新的演示链接：

如果必须为每个元素只保留一个类，则可以尝试类型的第n个子类或第n子类

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

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

参考：

---

我只想补充一点，通常当有多个菜单时，您可能会将它们包装在不同的结构中。例如：

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

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

或者，如果父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 {}

一些代码
一些代码
.ancestor1.classname{}
.ancestor2.classname{}

---

显然，这取决于它们在html中的位置。

我知道这是一种糟糕的方法，前面答案中的建议很有帮助，但不妨尝试一下：

第一菜单：

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

一些代码

第二菜单：

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

其他一些代码

您也可以这样做：

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

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

.classname.second {}

---

---

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

（在这里您正确地省去了空格）。这些菜单是否包装在其他可能有类的HTML结构中？@lucuma，是的，这就是为什么父类不同或相同的HTML很难实现的原因？对，但是我不想重命名类名。我喜欢保持现状。我可以为其中一个元素添加另一个类名属性吗？我们不会重命名类名。我们只需向元素添加另一个类。我是否可以仅向其中一个具有相同类名的元素添加第二个类名，或者两个具有相同类名的元素是否都需要第二个类名才能工作？您可以仅向其中一个元素添加另一个类：请参见2.html中的元素具有多个嵌套类，这些班级包括该班级的家长、祖父母等。html中的另一个元素只有一个父类。只要这些父类中的一个在这两个类之间不同，第二个代码集就可以工作。我已经将其重命名为ancestor1和ancestor2，希望能让它更清晰一些。不需要

中的
：not
。classname:not

作为

。classname.second

比

具有更高的特异性。是的，如果您需要对第一个元素使用规则集，那么我只需要覆盖
.classname.second
<div class="classname"> Some code </div>

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

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

.classname:not(.second) {}

.classname.second {}