重寫邊界樣式

我正在顯示的圖像中的三種類型的盒（2,3，和4）重寫邊界樣式

第一個元素是a的選擇風格框。

我想對其他三個應用此選定的樣式。

對於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上的樣式？

來源

2016-03-04 Oliver Watkins

覆蓋背景和邊框和移動CSS的底部，或讓CSS更具體(read more about css specifity)（加入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>

來源

2016-03-04 10:19:02 Nick

我覺得你的解決方案需要更好的解釋爲什麼這會起作用。 – Polyducks

好吧，所以它的*順序*我寫我的規則，確定覆蓋。 –

@OliverWatkins那麼，以及特異性 – Nick

您遇到的問題，被稱爲「特異性「，最好由博客文章解釋，通常稱爲'specificity wars'。

簡而言之，每個元素都有一個特定值。

元素，如李具有爲1
類的值，像.sold具有10
ID的特異性，像#box具有100特異性。

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

規則的順序也改變了特異性。如果您有兩個具有匹配的特異性分數的項目，那麼兩者中的後者將發光。

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

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

div.man（11分）

#house div.man（111分）

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

這是特異性的基礎。我建議你閱讀這篇文章 - 它將StarWars這個概念置於人們的讚賞之中。

來源

2016-03-04 10:31:19 Polyducks

重寫邊界樣式

回答

相關問題