我應該使用CSS：禁用的僞類還是[禁用]屬性選擇器還是意見問題？

我正在嘗試設置禁用的輸入樣式。我可以使用：我應該使用CSS：禁用的僞類還是[禁用]屬性選擇器還是意見問題？

.myInput[disabled] { }

或

.myInput:disabled { }

是屬性選擇器CSS3現代方式和前進的方式？我曾經使用僞類，但我無法找到任何有關它們是否是舊方法的信息，也不會被支持，或者它們是否都是平等的，您可以使用任何您最喜歡的方法。

我有沒有必要來支持舊的瀏覽器（這是一個Intranet應用程序），因此，它是：

屬性是更新更好的
僞類仍然是去
方式爲準你最喜歡
有一個技術理由使用了另一種

來源

2013-11-22 Peter

屬性選擇器是現代CSS3方式還是前進方式？

屬性是更新更好的

否;實際上，屬性選擇器自CSS2以來一直存在，並且自HTML 4以來disabled屬性本身已存在。據我所知，:disabled僞類是在Selectors 3中引入的，這使得僞類更新。

有一個技術理由使用了另一種

是，在一定程度上。

使用屬性選擇器，您依賴的知識是您正在設計的文檔使用disabled屬性來指示禁用的字段。從理論上講，如果您設計的不是HTML格式，禁用的字段可能不會使用disabled屬性（例如，它可能是enabled="false"或類似的東西。即使將來的HTML版本也會引入新的元素，這些元素使用不同的屬性來表示啓用/禁用狀態;那些元素將不匹配[disabled]屬性選擇器。

:disabled僞類將選擇器從您正在處理的文檔中分離出來。該規範只是說，它的目標是禁用的元素，而且元素是否被啓用，禁用，或兩者都不是，是defined by the document language instead：

何謂啓用狀態，禁用狀態，並且用戶界面元素依賴於語言。在典型的文件中，大多數元素既不是:enabled也不是:disabled。

換句話說，當您使用僞類時，UA根據您正在設計的文檔自動計算匹配哪些元素，因此您不必告訴它如何。

就DOM而言，我相信在DOM元素上設置disabled屬性也會修改HTML元素的disabled屬性，這意味着兩個選擇器與DOM操作之間沒有區別。我不知道這是否是依賴於瀏覽器，但here's a fiddle演示它的所有主流瀏覽器的最新版本：

// The following statement removes the disabled attribute from the first input 
document.querySelector('input:first-child').disabled = false;

你最有可能會被造型HTML，所以沒有這可能使但是如果瀏覽器兼容性不是問題，我會選擇:enabled和:disabled而不是:not([disabled])和[disabled]，因爲僞類攜帶屬性選擇器不支持的語義。我是這樣的純粹主義者。

來源

2013-11-22 14:12:39 BoltClock

呵呵。從來沒有這樣想過。但的確，我已經使用CSS和MXML（Flash UI語言）以及HTML（儘管前者幾乎不支持任何有用的東西） – Katana314

也應該考慮禁用屬性對HTML fieldset元素的影響。在FF和Chrome（但不是IE）中，後代控件的禁用*狀態*（由'：disabled'反映）將被應用，但內容屬性不會出現，IDL屬性（屬性）也不會爲真。看到http://jsfiddle.net/UH2S4/12/ – Alohci

很好的答案！你能否解釋更多關於*如何*「UA自動計算出哪些元素匹配」？例如，使用獨立的XML，如何使用'：disabled'僞類來指定要選擇的元素？ – chharvey

事實證明，Internet Explorer 10和11無法識別某些元素上的僞類，並且只能使用屬性選擇器語法正常工作。

#test1:disabled { color: graytext; } 
 
#test2[disabled] { color: graytext; }

<form> 
 
<fieldset id="test1" disabled>:disabled</fieldset> 
 
<fieldset id="test2" disabled>[disabled]</fieldset> 
 
</form>

上面剪斷的代碼呈現在IE中是這樣的：

只要你只是造型input元素，你應該罰款無論哪種方式。在您希望支持的所有瀏覽器中測試最終結果仍然是一個很好的建議。

來源

2015-01-31 09:05:00

哪個版本的IE？ – trysis

@trysis謝謝，看到更新。 –

在你的例子中，這並不重要，但像'disabled'這樣的屬性是爲了取得它們的名字，空字符串，或者什麼也不是，甚至沒有'='。在這裏，不要放置'disabled =「true」'，你應該把'disabled =「disabled」'或者只是'disabled'。這可能是IE瀏覽器失敗的原因，儘管我懷疑它。 – trysis

我應該使用CSS：禁用的僞類還是[禁用]屬性選擇器還是意見問題？

回答

相關問題