覆蓋CSS中的邊框樣式

Question

我在圖像中顯示了三種類型的框（2,3和4）

第一個元素是框的選定樣式。

我想在其他三個上應用這個選定的風格。

• 對於2，它是直截了當的。 灰色變黑了。
• 對於3我需要用實線替換虛線。
• 對於4我會用灰色替換灰色，但我想保留圖像。

但是，我試圖了解它如何與CSS中的繼承一起使用。 我只是添加了一個“有效”類來將其標記為已選中。 它適用於2，但對於3和4，它不知道如何處理類名的順序。 我無法刪除元素的類，因為顯然我想通過級聯更改（如選項4中的圖像）。

我的CSS看起來像這樣：

li {
  padding: 0.125rem;
  margin: 0.4375rem 1.0625rem 0.3125rem 0;
  border: 0.0625rem solid #d9d9d9;
}

li.active {
  border: 0.0625rem solid black;
}

li.sold {
  display: inline-block;
  border: 1px solid #ccc;
  background: url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png);
  background-size: 100% 100%;
}

li.wait-list {
  display: inline-block;
  border: 1px dashed #ccc;
}

我在JSFiddle中演示了這個：

https://jsfiddle.net/561aLm4z/7/

這可能是一個顯而易見的問題，但如何讓“主動”風格覆蓋第3和第4欄的樣式？

Answer 1

覆蓋背景和邊框並將css移動到底部，或使css更具體（更多關於css指定） （通過添加ul ）

 add1 = false add2 = false add3 = false add4 = false $("#2").click( function() { if (!add2) { $("#2").addClass("active") add2 = true; } else { $("#2").removeClass("active") add2 = false; } } ) $("#3").click( function() { if (!add3) { $("#3").addClass("active") add3 = true; } else { $("#3").removeClass("active") add3 = false; } } ) $("#4").click( function() { if (!add4) { $("#4").addClass("active") add4 = true; } else { $("#4").removeClass("active") add4 = false; } } ) 

 li { padding: 0.125rem; margin: 0.4375rem 1.0625rem 0.3125rem 0; border: 0.0625rem solid #d9d9d9; } li.sold { display: inline-block; border: 1px solid #ccc; background: url(http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png); background-size: 100% 100%; } li.wait-list { display: inline-block; border: 1px dashed #ccc; } ul li.active { border: 0.0625rem solid black; background: none; border: 1px solid black; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul class="hse-product-variant "> <li id="1" style="display: inline-block;" class="active"> 1 </li> <li id="2" style="display: inline-block;" class=""> 2 </li> <li id="3" style="display: inline-block;" class="wait-list"> 3 </li> <li id="4" style="display: inline-block;" class="sold"> 4 </li> </ul> 

Answer 2

您遇到的問題稱為“特異性”，最好通過俗稱“ 特異性戰爭 ”的博客文章來解釋。

簡而言之，每個元素都具有特異性值。

• 像li一樣的元素值為1。
• 像.sold這樣的類具有10的特異性。
• 像#box這樣的ID具有100的特異性。

通過組合這些值，您可以覆蓋較少的特定項目。

規則的順序也改變了特異性。 如果您有兩個具有匹配特異性分數的項目，則兩個項目中的較晚者將會閃現。

因此，您可以通過添加li.sold.selected規則（得分為21）來覆蓋您的li.sold規則（得分為11）。

您還可以使用父元素ID來提高特異性。 例如：

div.man（得分11）

#house div.man（得分111）

#London #house div.man（得分211）

這是特異性的基礎。 我建議你也閱讀這篇文章 - 它將概念放在StarWars中，這一點值得贊賞。