CSS魔法堂：稍稍深入偽類選擇器

tanglijun 發布于2019-08-29 16:34 / 824人閱讀

摘要：前言過去零零星星地了解和使用和等偽類偽元素選擇器，最近看書時發現這方面有所欠缺，于是決定稍微深入學習一下，以下為偽類部分的整理。偽類偽類選擇器實質上是讓設計師可以根據元素特定的狀態，設置不同的視覺效果。也就是符合以下選擇器的元素均支持狀態。

前言

?過去零零星星地了解和使用: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，用于定位頁面內某項資源。假設現在頁面存在

Target

的元素，那么只要地址欄輸入#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，用于設置元素的樣式，從IE9開始支持。

:checked，用于設置單選和復選控件被選中的樣式，從IE9開始支持。結合偽元素::before和content屬性可以實現靈活高效的自定義單選和復選控件。

:empty，用于設置沒有子節點的元素的樣式。div{ }為存在TEXT_NODE子節點的元素，而div{}則為沒有子節點的元素。

:not，作為謂語表達取反的語義。

:placeholder-shown，用于設置元素placeholder顯示時的樣式。

總結

尊重原創，轉載請注明來自：https://www.cnblogs.com/fsjoh... ^_^肥仔John

參考

https://css-tricks.com/almana...
https://www.zhangxinxu.com/wo...

GPU云服務器云服務器 css選擇器基礎選擇器css css選擇 js css 加載器

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113830.html

CSS魔法堂：一起玩透偽元素和Content屬性

摘要：前言繼上篇魔法堂稍稍深入偽類選擇器記錄完偽類后，我自然而然要向偽元素伸出魔掌的啦。和的注意事項默認必須設置屬性，否則一切都是無用功默認，就是和的內容無法被用戶選中的偽元素和偽類結合使用形如。前言 ?繼上篇《CSS魔法堂：稍稍深入偽類選擇器》記錄完偽類后，我自然而然要向偽元素伸出魔掌的啦^_^。本文講講述偽元素以及功能強大的Contet屬性，讓我們可以通過偽元素更好地實現更多的可能！ ...

DevTalking 2019-08-30 15:54 評論0 收藏0
CSS魔法堂：重拾Border之——更廣闊的遐想

摘要：也就是說我們操作的幾何公式中的未知變量，而具體的畫圖操作則由渲染引擎處理，而不是我們苦苦哀求設計師幫忙。前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現border-top-left/right-radius的水平半徑之和大于元素寬度時，實際值會按比...

lily_wang 2019-08-30 13:01 評論0 收藏0
CSS魔法堂：重拾Border之——解構Border

摘要：本系列將稍微深入探討一下那個貌似沒什么好玩的魔法堂重拾之解構魔法堂重拾之圖片作邊框魔法堂重拾之不僅僅是圓角魔法堂重拾之更廣闊的遐想解構說起我們自然會想起，而由條緊緊包裹著的邊組成，所以的最小操作單元是。前言 ?當CSS3推出border-radius屬性時我們是那么欣喜若狂啊，一想到終于不用再添加額外元素來模擬圓角了，但發現border-radius還分水平半徑和垂直半徑，然后又發現...

lingdududu 2019-08-30 13:00 評論0 收藏0
CSS魔法堂：小結一下Box Model與Positioning Scheme

摘要：魔法堂重新認識和魔法堂你一定誤解過的魔法堂就這個樣魔法堂說說那個被埋沒的志向深入細節后會發現中定位模式之間，和之間存在千絲萬縷的關系，必須以俯瞰的角度捋一下。當采用時，屬性的實際值會被重置為。由于和則需要通過來引入來提供盒子定位微調的功能。前言 ?對于Box Model和Positioning Scheme中3種定位模式的細節，已經通過以下幾篇文章記錄了我對其的理解和思考。?《CSS...

szysky 2019-08-30 12:57 評論0 收藏0
CSS魔法堂：display:none與visibility:hidden的恩怨情仇

摘要：不耽誤表單提交數據雖然我們無法看到的元素，但當表單提交時依然會將隱藏的元素的值提交上去。讓元素在見面上不可視，但保留元素原來占有的位置。不過由于各瀏覽器實現效果均有出入，因此一般不會使用這個值。繼承父元素的值。前言 ?還記得面試時被問起請說說display:none和visibility:hidden的區別嗎？是不是回答完display:none不占用原來的位置，而visibilit...

selfimpr 2019-08-30 15:54 評論0 收藏0