如何將不同的CSS樣式應用於具有相同類名的2個元素？
[英]How to apply different CSS styles to 2 elements with the same class name?
問題描述
我創建了一個具有不同導航菜單的網站。 在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以及某種方式作為選擇器嗎？
如果可能的話，我再也不想刪除類名。
謝謝！
6 個解決方案
解決方案1
10 已采納 2014-07-16 02:15:26
我只是添加，通常當有多個菜單時，您可能將它們包裝在不同的結構中。 舉個例子：
<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
4 2014-07-16 02:08:30
您可以為每個元素添加另一個類名。
<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
解決方案3
2 2014-07-16 02:05:23
只需給每個人一個不同的身份
#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{
}
解決方案4
2 2014-07-16 02:37:27
你也可以這樣做：
<div class="classname"> Some code </div>
<div class="classname second"> Some different code </div>
第一個.classname就是這樣的：
.classname:not(.second) {}
對於第二個元素，它很容易：
.classname.second {}
解決方案5
0 2014-07-16 02:34:01
我知道這是一種糟糕的做法，以前的答案中的建議很有幫助，但嘗試這可能：
第一個菜單：
<div class="classname"> Some code </div>
第二個菜單：
<div class="classname" style="margin-bottom:0;color:Black;width:100px;height:100px"> Some other code </div>
解決方案6
0 2019-04-10 09:20:45
你可以通過定義一個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>
干杯你已經使用相同的類名結果應用了不同的風格
如何將 Javascript 鼠標懸停 css 效果應用於具有相同類名的所有元素？
[英]How to apply Javascript mouseover css effects to all elements with the same class name?
將不同的css樣式應用於具有相同類名的兩個相同的h4標記
[英]Apply different css style to two same h4 tag which has same class name
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.