CSS3：未檢查僞類

我知道有一個僞類，但是有僞類，並且它們是否具有相同的瀏覽器支持？CSS3：未檢查僞類

Sitepoint's reference沒有提到一個，但是這個whatwg spec（不管那是什麼）。

我知道什麼時候該:checked和:not()僞類組合可以達到同樣的效果，但我仍然好奇：

input[type="checkbox"]:not(:checked) { 
    /* styles */ 
}

編輯：

W3C的建議相同技術

未選中的複選框可以通過使用否定僞類選擇：
:not(:checked) 

來源

2012-01-13 Web_Designer

沒有：選中僞類但是如果你使用：檢查僞類和兄弟選擇，你可以兩種狀態之間進行區分。我相信所有最新的瀏覽器支持：檢查僞類，你可以從這個資源中找到更多的信息：http://www.whatstyle.net/articles/18/pretty_form_controls_with_css

你會得到更好的瀏覽器支持與jQuery ...你可以使用點擊功能來檢測何時點擊發生，如果它的檢查與否，那麼你可以添加一個類或刪除一個類，如有必要...

來源

2012-01-13 04:54:35

:unchecked沒有在選擇器或CSS UI級別3規範中定義，也沒有出現在級別4選擇器。

事實上，W3C的報價是taken from the Selectors 4 spec。由於選擇器4建議使用:not(:checked)，因此假設沒有相應的:unchecked僞是安全的。瀏覽器支持:not()和:checked是相同的，所以這應該不成問題。

這似乎與:enabled和:disabled狀態不一致，特別是因爲一個元素可以是既不啓用也不禁用（即語義完全不適用），但似乎沒有成爲這種不一致任何解釋。

（:indeterminate不算數，因爲一個元素可以同樣既不制止，也不檢查，因爲不確定的語義不適用。）

來源

2012-03-19 16:28:51 BoltClock

只是爲了增加這個答案，選擇：not（：checked）在Chrome上完美工作，但它不在IE上（在9和11上測試過）。 – 2015-01-20 15:40:30

@Bruno Finger :: checked和：not（：checked）都應該在IE上工作，除非它們同樣受到一個錯誤的影響，在這個錯誤中，更改checked狀態並不會更新目標元素相對於checked /未檢查的元素。 – BoltClock 2015-01-20 15:44:17

我認爲你正試圖在複雜的事情。一個簡單的解決方案是默認使用未經檢查的樣式對複選框進行樣式設置，然後添加選中的狀態樣式。

input[type="checkbox"] { 
    // Unchecked Styles 
} 
input[type="checkbox"]:checked { 
    // Checked Styles 
}

我很抱歉提出一箇舊的線程，但覺得它可以使用更好的答案。

編輯（2016年3月3日）：

W3C功能狀態:not(:checked)作爲其用於選擇未選中狀態的例子。但是，這顯然是未經檢查的狀態，並且只會將這些樣式應用於未經檢查的狀態。這對於添加僅在未檢查狀態下需要的樣式非常有用，並且如果在input[type="checkbox"]選擇器上使用，則需要從檢查狀態中移除樣式。請參閱下面的示例進行說明。

input[type="checkbox"] { 
    /* Base Styles aka unchecked */ 
    font-weight: 300; // Will be overwritten by :checked 
    font-size: 16px; // Base styling 
} 
input[type="checkbox"]:not(:checked) { 
    /* Explicit Unchecked Styles */ 
    border: 1px solid #FF0000; // Only apply border to unchecked state 
} 
input[type="checkbox"]:checked { 
    /* Checked Styles */ 
    font-weight: 900; // Use a bold font when checked 
}

而不在:checked選擇上面的例子中使用:not(:checked)會需要使用border: none;來達到同樣的影響。使用作爲基礎樣式以減少重複。

將input[type="checkbox"]:not(:checked)用於不希望應用於選中狀態的顯式未檢查樣式。

來源

2015-05-21 16:34:38

雖然有用/表現力的CSS選擇器還有其他用途：javascript，自動瀏覽器測試 – nruth 2015-06-26 14:40:41

這並非總是可行。特別是表單元素是不可信的，因爲它們不允許您通過級聯規則將它們還原爲其默認外觀。（儘管爲什麼任何人只想給予選中的或只有未經檢查的輸入，而使其他薄荷超出了我的自定義外觀和感覺）。 – BoltClock 2015-09-30 09:54:27

另一種情況是不可能的：超過2個單選按鈕。例如，當選項＃1被選中時，您可能需要一種樣式：選中時選擇另一種樣式;選中時則選擇其他樣式。解決方案是：：not（：checked）' – Navin 2015-12-11 01:08:07

-1

<style> 

input, span { 
    background: red; 
} 

:indeterminate, :indeterminate + span { 
    background: limegreen; 
} 
</style> 

</head> 

<body> 

<input type="checkbox"> <span>Everything in this paragraph should have a green background.</span> 


<script type="text/javascript"> 
    document.getElementsByTagName("input")[0].indeterminate = true; 
</script>

來源

2016-07-02 13:34:22 zloctb

我處理這個的方式是根據條件切換標籤的className。這樣你只需要一個標籤，你可以爲不同的州有不同的類...希望有幫助！

來源

2017-06-12 22:10:07

CSS3：未檢查僞類

回答

相關問題