CSS :default與:checked 區別

admin發表於2019-09-12
CSS

標題中兩個都是偽類選擇器，有一些類似的地方，本文將進行一些分析。

關於兩個選擇器的基本用法可以參閱如下兩篇文章：

（1）.CSS E:checked 偽類選擇器一章節。

（2）.CSS E:default 偽類選擇器一章節。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
#top input[type=checkbox]:default{
  transform: scale(1.5);
} 
#bottom input[type=checkbox]:checked{
  transform: scale(1.5);
} 
</style> 
</head>
<body>
<div id="top">
  <input type="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" name="favorite" value="2" checked />後端
  <input type="checkbox" name="favorite" value="3" />美工
</div>
<div id="bottom">
  <input type="checkbox" name="favorite" value="1" />前端
  <input type="checkbox" name="favorite" value="2" checked />後端
  <input type="checkbox" name="favorite" value="3" />美工
</div>
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201909/12/133334w9kag1umze0m1kk0.jpg\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

兩個選擇器的表現完全一樣，但是實質上還是有區別的，分析如下：

（1）.:checked匹配的是選中核取方塊。

（2）. :default匹配的是預設選中的核取方塊。

（3）.大家可以測試一下，切換底部核取方塊的選中狀態，會改變核取方塊的樣式，但是頂部的不會。

（4）.:default匹配的預設選中的項，不一定是checked狀態，也可能是selected狀態，作用範圍更廣。

相關文章