跳到主要內容
  • 字級
:::|

4.1:CS1040100 所有可取得輸入焦點的網頁元件組件,均以CSS虛擬類別選擇符,來指定取得焦點時的不同呈現方式

 

檢測碼

CS1040100

訊息

所有可取得輸入焦點的網頁元件組件,均以CSS虛擬類別選擇符,來指定取得焦點時的不同呈現方式

英文訊息

C15: Using CSS to change the presentation of a user interface component when it receives focus

檢測規則

if 網頁元件組件存在且其所對應的CSS區塊名稱後存在組件名稱:link、:visited、:hover、:focus或:active,通過檢測,否則檢測失敗。

規則說明

若有可輸入焦點的網頁元件組件,需要使用CSS虛擬類別選擇符,像是link、visited、hover、:focus或active,則通過檢測。

原始碼範例

<ul id="mainnav">

  <li class="page_item">首頁</li>

  <li class="page_item"><a href="/services">服務</a></li>

  <li class="page_item"><a href="/projects">專案</a></li>

  <li class="page_item"><a href="/demos">成品</a></li>

  <li class="page_item"><a href="/about-us">關於我們</a></li>

  <li class="page_item"><a href="/contact-us">聯絡我們</a></li>

  <li class="page_item"><a href="/links">連結</a></li>

</ul>

 

#mainnav a:hover, #mainnav a:active, #mainnav a:focus {

  background-color: #DCFFFF;

  color:#000066;

}

說明

html:

各標籤中的class為呼叫CSS中自訂類別

<a>標籤中href屬性為連結網址或頁面

CSS:

CSS中a:hover、a:active、a:focus為虛擬類別選擇符