|
導讀網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立... 網頁的本質就是超級文本標記語言，通過結合使用其他的Web技術（如：腳本語言、公共網關接口、組件等），可以創造出功能強大的網頁。因而，超級文本標記語言是萬維網（Web）編程的基礎，也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言，是因為文本中包含了所謂“超級鏈接”點。 本篇文章給大家帶來的內容是關于深入理解CSS偽類選擇器的知識（代碼示例），有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。前言過去零零星星地了解和使用:link、::after和content等偽類、偽元素選擇器，最近看書時發現這方面有所欠缺，于是決定稍微深入學習一下，以下為偽類部分的整理。 偽類?偽類選擇器實質上是讓設計師可以根據元素特定的狀態，設置不同的視覺效果。具體有:link、:visited、:hover、:active、:focus、:focus-within、:target、:root和:checked。 HTMLAnchorElement的4大經典偽類
:link，用于設置鏈接初始狀態時的樣式;
:visited，用于設置鏈接被點擊過后的樣式;
:hover，用于設置鼠標懸停在鏈接上方時，鏈接的樣式;
:active，用于設置鼠標按鍵按下，但未釋放時，鏈接的樣式。
?想必各位都和我一樣，最初接觸到的就是上述4個偽類了吧？！而且還死機硬背它們的設置順序(LVAH)吧，哈哈。 設置當前目標元素樣式?還記得URL中的井號嗎？從井號(#)開始到URL的末尾稱為URL的hash或fragment，用于定位頁面內某項資源。假設現在頁面存在<h3 id="title">Target</h3>的元素，那么只要地址欄輸入#title瀏覽器就會不斷滾動(滾動不一定存在補間動效)直到元素h3#title位于可視區的特定位置。（注意：請不要和UI Routing混為一談）
?而上述這個被定位的頁面資源，被稱為目標元素或當前活動元素！可通過:target設置其樣式。
?兼容性：IE9開始支持。 示例： // 當前URL為http://foo.com#1
:target {
color: red;
}
.title{
color: blue;
&:target{
border: solid 1px red;
}
}
.title{I'm not target element.}
.title#1{Yes, I'm.}設置元素獲得焦點時的樣式:focus用于設置元素處于focus狀態下的樣式。
兼容性：IE8開始支持。
那么哪些元素支持focus狀態呢？那要先弄清楚通過哪些操作可能實現focus。
它們分別是：
鼠標點擊; Tab鍵; 通過JavaScript的HTMLElement.prototype.focus()方法。
那么傳統上支持focus狀態的元素必定是a、button、input、select和textareas.
而HTML5中增加當元素設置了contenteditable或tabindex屬性時，該元素支持focus狀態。
也就是符合以下選擇器的元素均支持focus狀態。 a,button,input,select,textarea,[contenteditable],[tabindex] 注意：若tabindex屬性值小于0，則無法通過Tab鍵獲得焦點。但可以通過鼠標點擊 或 腳本時元素獲得焦點。 JS獲取當前得到焦點的元素/*
* 加載完成時默認返回body
* 若某元素獲得焦點時，則返回該元素
*/
document.activeElement :: HTMLElement 另外還有一個讓人誤會的屬性 // 用于檢測文檔是否得到焦點，即用戶是否正在與頁面交互
// 頁面僅僅位于屏幕可視區域，而用戶沒有與之交互時返回false。
document.hasFocus :: Void -> Boolean 設置子元素獲得焦點時，該元素的樣式:focus-within，用于設置當子元素處于focus狀態時，該元素的樣式。
兼容性:Chrome63開始支持。
示例：二次確認密碼時，密碼框高亮 .form-control{
&:focus-within > input{
&:focus {
border: solid 1px skyblue;
}
&:not(:focus){
border: solid 1px orange;
}
}
}
.form-control>input.pwd[type=password]+input.confirm-pwd[type=password]其他:root，用于設置<html>元素的樣式，從IE9開始支持。
:checked，用于設置單選和復選控件被選中的樣式，從IE9開始支持。結合偽元素::before和content屬性可以實現靈活高效的自定義單選和復選控件。
:empty，用于設置沒有子節點的元素的樣式。p{ }為存在TEXT_NODE子節點的元素，而p{}則為沒有子節點的元素。
:not，作為謂語表達取反的語義。
:placeholder-shown，用于設置元素placeholder顯示時的樣式。
相關推薦： CSS的偽類選擇器
關于CSS偽類選擇器_html/css_WEB-ITnose 以上就是深入理解CSS偽類選擇器的知識（代碼示例）的詳細內容，更多請關注php中文網其它相關文章！
網站建設是一個廣義的術語，涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。
| 
