CSS E:default 偽類選擇器

admin發表於2019-09-12
CSS

:default是一個偽類選擇器，與偽類選擇器相似的是偽元素選擇器。

關於兩者的區別可以參閱CSS偽類與偽元素選擇器區別一章節。

此選擇器可以匹配被預設選中的表單元素，比如核取方塊、單選按鈕或者select下拉選單。

下面將結合程式碼例項詳細介紹一下此選擇器的具體用法。

語法結構：

[CSS] 純文字檢視 複製程式碼
E:default

特別說明：E是CSS選擇器，比如可以是元素選擇器或者類選擇器等。

瀏覽器支援:

（1）.IE瀏覽器不支援此選擇器。

（2）.edge瀏覽器不支援此選擇器。

（3）.谷歌瀏覽器支援此選擇器。

（4）.火狐瀏覽器支援此選擇器。

（5）.opera瀏覽器支援此選擇器。

（6）.safria瀏覽器支援此選擇器。

瀏覽器支援度隨時可能發生變化，推薦使用https://www.caniuse.com/進行檢測。

例項程式碼：

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

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

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

簡單分析如下：

（1）.input[type=checkbox]:default匹配預設選中的核取方塊。

（2）.由於第二個核取方塊處於預設選中狀態，所以它會被放大兩倍。

（3）.一定要記住，是匹配預設選中的表單元素。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
option:default{
  color:red;
}  
</style> 
</head>
<body>
<form name="myform" method="post" action="do.php">
  <select name="sel">
    <option>螞蟻部落一</option>
    <option selected>螞蟻部落二</option>
    <option>螞蟻部落三</option>
    <option>螞蟻部落四</option>
  </select>     
</form>
</body>
</html>

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

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

程式碼分析如下：

（1）.第二個下拉選單預設選中，所以被匹配，字型顏色設定為紅色。

（2）.如果不顯式設定下拉選單的選中狀態，預設是第一個選中，但不能匹配成功。

（3）.必須顯式才能夠被匹配。

（4）.最後再強調一下，此選擇器匹配的是預設選中的項。

實際應用中，預設選中的表單元素可能會具有某些特質，比如是推薦、難點或者注意等。

下面通過一件程式碼例項對其進行一下簡單演示：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
input[type=radio]:default + label::after{
    content:'(特價)';
    color:red;
}
</style>
</head>
<body>
<form name="myform" method="post" action="do.php">
  <input type="radio" name="favorite" id="one" value="1" />
  <label for="one">套餐一</label>
  <br>
  <input type="radio" name="favorite" id="two" value="2" checked />
  <label for="two">套餐二</label>
  <br>
  <input type="radio" name="favorite" id="three" value="3" />
  <label for="three">套餐三</label>
</form>
</body>
</html>

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

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

程式碼非常的簡單，不再過多介紹，更多內容參閱如下幾篇文章：

（1）.關於<label>可以參閱HTML <label> 標籤一章節。

（2）.+選擇器參閱CSS (E+F)相鄰選擇器一章節。

（3）.::after參閱CSS E::after 偽元素選擇器一章節。

相關文章