jQuery中的addClass不能按我的要求工作

Question

我有一個代碼，使用jQuery添加了一個類（ .class2 ）。 應用了該類，但是該類的某些樣式無效：

$('.item1').addClass('class2');    

.item1 {
    font-size: 40px;
    text-align: center;
    height: 60px;
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 0px 0px;
    text-decoration: none;
    color: white;
    margin: -10px 0px;
    -webkit-transition: background-color 0.4s;
    -moz-transition: background-color 0.4s;
    transition: background-color 0.4s;
}
.item1:hover {
    background-color: rgba(0, 0, 0, 0.7);
}
.class2 {
    background-color: rgba(0, 0, 0, .85);
    border: 1px solid black;
    cursor: default;
    /* background-color and border aren't applied */
}

Answer 1

那是因為.item1已經具有background-color並覆蓋了新類.class2添加的新background-color ，因此您可以嘗試使規則更具體，例如：

.item1.class2 {
   ...
   background-color: rgba(0, 0, 0, .85);
}

希望這可以幫助。

Answer 2

問題不在jQuery上。 問題出在您的CSS規則上。

說明

瀏覽器將始終應用更具體的規則，例如：

HTML：

<div id="my-div">
   <ul class="my-list">
      <li class="my-item">
   </ul>
</div>

CSS：

#my-div > ul > li.my-item {
    background-color: none;
}

.my-item {
    background-color: red
}

瀏覽器將檢查哪個規則更具體，在這種情況下，第一個規則顯然更具體。

如果要覆蓋此規則，則必須編寫至少具有相同特異性的規則（檢查此特異性計算器） 。

如果規則具有完全相同的特異性，則將應用最后一個規則。

解

使用瀏覽器開發人員工具檢查在元素上應用的規則，然后編寫至少具有相同特異性的規則。

由於應分析整個頁面，因此沒有確切的解決方案。

為什么不重要？

首先，讓我們了解!important工作原理。 ！important將使您的規則具有最高的特異性，例如“無限”的特異性。

因此，該規則只能被此規則之后的規則覆蓋，也要使用！important。

好的，這可以解決我的問題，對嗎？

盡管這可以立即解決您的問題，但是這種做法並不好，並且會給您帶來非常難以維護的CSS。

如果在所有內容上都使用它，那么您將扼殺CSS C （級聯樣式表），並且您將僅需要依賴規則順序，有時您將無法編寫所需的規則。

剛開始使用CSS的每個人都認為Cascade是一件無聊的事情，在所有內容上都使用！important是可以的，但事實並非如此。 遲早您會意識到的。

Answer 3

您的代碼正在為我工​​作（請參見下文）。 如果您的樣式被其他規則覆蓋，請檢查您的開發者控制台。 在這種情況下，請使用更高的 .item1.class2 ，例如.item1.class2來覆蓋已經設置的背景顏色。

!important不是解決方案 ，但充其量只是一種解決方法（這是不好的做法）。 嘗試組織您的規則以擁有正確的順序。

 // JS with jQuery $('.item1').addClass('class2'); 

 .item1 { font-size: 40px; text-align: center; height: 60px; background-color: rgba(0, 0, 0, 0.5); border-radius: 0px 0px; text-decoration: none; color: white; margin: -10px 0px; -webkit-transition: background-color 0.4s; -moz-transition: background-color 0.4s; transition: background-color 0.4s; } .item1:hover { background-color: rgba(0, 0, 0, 0.7); } .item1.class2 { background-color: rgba(0, 0, 0, .85); border: 1px solid black; cursor: default; /* background-color and border aren't applied */ } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="item1"></div> 

Answer 4

如果您加載jquery庫，仍然無法正常工作。 您可以在樣式中添加！important，以便可以使用樣式，這是class2的代碼示例。

.class2 {
    background-color: rgba(0, 0, 0, .85) !important;
    border: 1px solid black !important;
    cursor: default !important;
    /* background-color and border aren't applied */
}

javascript jquery