如何更改CSS優先級（不使用重要！）

Question

如果CSS是如下：

input[type="text"] 
{ 
    border: 1px solid green; 
} 

.text 
{ 
    border: 1px solid red ; 
} 

而且如果HTML如下：

<div> 
<input type="text" class="text"/> 
</div>​ 

的文本框的border-color是綠色的。 看來「元素」具有更高的優先級。
如何使.class有效？是否必須使用!important？

還有其他的選擇嗎？

---

我測試下面的CSS代碼：

input[type="text"] 
{ 
    border: 1px solid green; 
} 

input[type="text"] .text 
{ 
    border: 1px solid red; 
} 

HTML代碼：

<div> 
    <input type="text" class="text"/> 
</div> 

你猜怎麼着

還是綠的？

刪除'input [type =「text」] .text'中的空格' 它變成input [type =「text」] .text。 沒關係。邊框顏色是紅色的。

Answer 1

CSS中的C代表級聯。你只需要給它更高的優先級，然後再使用其他規則。

input.text 
{ 
    border: 1px solid red ; 
} 

Answer 2

/* Set default border for `text` elements */ 
.text 
{ 
    border: 1px solid red; 
} 

/* Override for input elements */ 
input.text 
{ 
    border: 1px solid green; 
} 

Answer 3

樣式按順序應用，但也必須遵循特異性規則。 .text不如input[type="text"]具體，所以綠色邊框「勝利」。如果你使紅色邊界規則更具體，你可以得到你期待的結果。

試試類似input.text，看看會發生什麼。如果那樣做不行，你必須得到更具體的。

Answer 4

這是您的選擇器的重量問題。

隨着

`input[type="text"] 

你傳入兩個input和[type=text]作爲選擇，所以你一共經過兩個。

隨着

.text 

你傳入只有一個。這意味着重量更輕，特異性更低，所以第一個選擇器勝過第二個。

通過在之前添加input（即input.text），您將爲第二種樣式增加更多的權重，這將會像您期望的級聯樣式表一樣佔上風。

通過如Specificity Calculator這樣的網站很容易可視化特異性。