如果css如下所示:

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

.text
{
     border: 1px solid red ; 
}

如果html如下所示:

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

文本框的邊框顏色是綠色。 似乎“元素”具有更高的優先級。 如何制作？類別有效？是不是一定要用！重要嗎？

還有其他選擇嗎？

我測試了下面的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"]中的空格。'文本' 它成為輸入[type="text"]。文字。 沒關系。邊框顏色為紅色。

CSS中的C代表級聯。你只需要給它比其他規則更高的優先級。

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

樣式是按順序應用的，但也必須遵循特異性規則。的。文本不如輸入[type="text"]具體，因此綠色邊框“勝出”如果你讓紅色邊框規則更具體，你就能得到你似乎期待的結果。

試試類似input.text的東西，看看會發生什么。如果這還不夠，你就必須更具體。

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

隨著

input[type="text"]

您同時將input和[type=text]作為選擇器傳遞，所以您總共傳遞了兩個。

隨著

.text

你只通過了一個。這意味著權重更小，特異性更低，因此第一個選擇器會勝過第二個選擇器。

通過在前面添加輸入(即input.text ),您為第二種樣式增加了更多的權重，正如您對級聯樣式表的期望一樣，第二種樣式將占主導地位。

特異性很容易通過網站可視化，如特異性計算器。