摘要:如果頁面上的鏈接很多或者對跳轉頁面的協議有要求,使用屬性選擇器配合偽元素對鏈接的協議進行提示也不失為一種好方法。
CSS 屬性選擇器,可以通過已經存在的屬性名或屬性值匹配元素。
屬性選擇器是在 CSS2 中引入的并且在 CSS3 中得到了很好拓展。本文將會比較全面的介紹屬性選擇器,盡可能的去挖掘這個選擇器在不同場景下的不同用法。
簡單的語法介紹[attr]:該選擇器選擇包含 attr 屬性的所有元素,不論 attr 的值為何。
[attr=val]:該選擇器僅選擇 attr 屬性被賦值為 val 的所有元素。
[attr~=val]:該選擇器僅選擇具有 attr 屬性的元素,而且要求 val 值是 attr 值包含的被空格分隔的取值列表里中的一個。
子串值(Substring value)屬性選擇器,下面幾個屬于 CSS3 新增語法,也被稱為“偽正則選擇器”,因為它們提供類似 regular expression 的靈活匹配方式。
[attr|=val] : 選擇attr屬性的值是 val 或值以 val- 開頭的元素(注意,這里的 “-” 不是一個錯誤,這是用來處理語言編碼的)。
[attr^=val] : 選擇attr屬性的值以 val 開頭(包括 val)的元素。
[attr$=val] : 選擇attr屬性的值以 val 結尾(包括 val)的元素。
[attr*=val] : 選擇attr屬性的值中包含子字符串 val 的元素(一個子字符串就是一個字符串的一部分而已,例如,”cat“ 是 字符串 ”caterpillar“ 的子字符串
CSS 屬性選擇器的最基本用法屬性選擇器最基本的用法,就是通過元素的屬性值去選擇 DOM 元素。像這樣,將選中所有帶 href 屬性的DOM 元素:
[href] { color: red; }
CodePen Demo -- 屬性選擇器基本用法
復雜一點點的用法 層疊選擇div [href]{ ... }多條件復合選擇
選擇一個 img 標簽,它含有 title 屬性,并且包含類名為 logo 的元素。
img[title][class~=logo]{ ... }偽正則寫法
i 參數
忽略類名的大小寫限制,選擇包含 class 類名包含子字符串為 text,Text,TeXt... 等情況的 p 元素。
這里的 i 的含義就是正則里面參數 i 的含義,ignore,忽略大小寫的意思。
p[class*="text" i] { ... }
所以上面的選擇器可以選中類似這樣的目標元素:
g 參數
與正則表達式不一樣,參數 g 在這里表示大小寫敏感(case-sensitively)。然而,這個屬性當前仍未納入標準,支持的瀏覽器不多。
CodePen Demo -- 屬性選擇器的偽正則用法
配合 :not() 偽類還有一種比較常用的場景就是搭配:not() 偽類,完成一些判斷檢測性的功能。譬如下面這個選擇器,就可以選取所有沒有 [href] 屬性的 a 標簽,添加一個紅色邊框。
a:not([href]){ border: 1px solid red; }
當然,復雜一點,我們可以搭配不僅僅一個 :not()偽類,像是這樣,可以同時多個配合使用,選擇一個 href, target, rel 屬性都沒有的 a 標簽:
a:not([href]):not([target]):not([rel]){ border: 1px solid blue; }
CodePen Demo -- 屬性選擇器配合 :not 偽類
重寫行內樣式?甚至乎,如果有這種場景,我們還可以覆蓋掉行內樣式,像這樣:
xxxxxx
我們可以使用屬性選擇器強制覆蓋掉上述樣式:
[style*="color: red"] { color: blue !important; }組合拳用法,搭配偽元素提升用戶體驗
當然,屬性選擇器不一定只是單單的進行標簽的選擇。
配合上偽元素,我們可以實現很多有助提升用戶體驗的功能。
角標功能這里有一個小知識點,偽元素的 content 屬性,通過 attr(xxx),可以讀取到對應 DOM 元素標簽名為 xxx 的屬性的值。
所以,配合屬性選擇器,我們可以很容易的實現一些角標功能:
Message
div { position: relative; width: 200px; height: 64px; } div::before { content: attr(count); ... }
這里右上角的數字 5 提示角標,就是使用屬性選擇器配合偽元素實現,可以適應各種長度,以及中英文,能夠節省一些標簽。CodePen Demo -- 屬性選擇器實現角標功能
屬性選擇器配合偽元素實現類 title 功能我們都知道,如果給一個圖片添加一個 title 屬性,當 hover 到圖片上面的時,會展示 title 屬性里面附加的內容,類似這樣:
這里不一定是 img 標簽,其他標簽添加 title 屬性都能有類似的效果。但是這里會有兩個問題:
響應太慢,通常鼠標 hover 上去要隔 1s 左右才會出現這個 title 框
框體結構無法自定義,彈出框的樣式無法自定義
所以這里,如果我們希望有一些自己能夠控制樣式的可快速響應的浮層,可以自定義一個類 title 屬性,我們把它稱作 popTitle,那么可以這樣操作:
這是一段描述性文字
這是一段描述性文字
p[popTitle]:hover::before { content: attr(popTitle); position: absolute; color: red; border: 1px solid #000; ... }
對比一下,第一個是原生自帶的 title 屬性,下面兩個是使用屬性選擇器配合偽元素模擬的提示:
瀏覽器自帶的 title 屬性延遲響應是添加一層防抖保護,避免頻繁觸發,這里也可以通過對偽元素添加一個100毫秒級的 transition-delay 實現延遲展示。
CodePen Demo -- 屬性選擇器配合偽元素實現類 title 功能
商品展示提示效果好,上面的運用實例我們再拓展一下,考慮如何更好的運用到實際業務中,其實也是有很多用武之地的。譬如說,通過屬性選擇器給圖片添加標簽,類似一些電商網站會用到的一個效果。
我們希望給圖片添加一些標簽,在 hover 圖片的時候展示出來。
當然,CSS 中,諸如 、、,這幾個標簽是不支持偽元素的。
所以這里我們輸出 DOM 的時候,給 img 的父元素帶上部分圖片描述標簽。通過 CSS 去控制這些標簽的展示:
[desc1]::before, [desc2]::after { position: absolute; opacity: 0; } [desc1]::before { content: attr(desc1); } [desc2]::after { content: attr(desc2); } [desc1]:hover::before, [desc2]:hover::after{ opacity: 1; }
看看效果:
CodePen Demo -- 通過屬性選擇器給圖片添加標簽
屬性選擇器配合偽元素實現下載提示我們知道,HTML5 對標簽新增了一個 download 屬性,此屬性指示瀏覽器下載 URL 而不是導航到它。
那么,我們可以利用屬性選擇器對所有帶此類標簽的元素進行提示。像這樣:
logo
[download] { position: relative; color: hotpink; } [download]:hover::before { content: "點擊可下載此資源!"; position: absolute; ... }
當我們 hover 到這個鏈接的時候,就會這樣,提示用戶,這是一個可以下載的按鈕:
CodePen Demo -- 屬性選擇器配合偽元素做下載提示
屬性選擇器配合偽元素對鏈接的協議進行提示(http/https)現在大部分網站不是切了 https 就是走在切 https 的路上。如果頁面上的鏈接很多或者對跳轉頁面的協議有要求,使用屬性選擇器配合偽元素對鏈接的協議進行提示也不失為一種好方法。
a[href^="http:"]:hover::before { content: "這是一個http鏈接"; ... } a[href^="https:"]:hover::before { content: "這是一個https鏈接"; }
CodePen Demo -- 屬性選擇器配合偽元素對鏈接的協議進行提示(http/https)
當然,偽元素的內容不一定是純文字的,為了給用戶更好的體驗,圖或者圖片加文字也是可以的。
譬如我們可以形象化地給 https 鏈接站點再加一個小綠鎖,符合用戶的一些常規認知。
這里我將小綠鎖的圖片使用 base64 嵌入到偽元素當中,簡單的使用 text-indent 控制圖文的排布:
a[href^="https:"]:hover::before { content: ""; padding-left: 16px; background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAYAAABWdVznAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAb0lEQVQoz2NkQAJc5aIc//7962VgYIiDCi1iYmIq/tb5+gdMDROyBqhiGWYmJlVmJiZVBgYGGagYdsBRKvyZu1xUAsbnLheV4CgV/oxbQ4nwf0JiTAwkAkaIU4QaGf4z1uFX+b/pR/e7epJtGJEaAKDXHzEJ3KYmAAAAAElFTkSuQmCC"); ... }
這里只是一個非常小的 Demo,實際情況是大部分用戶并不了解這個小綠鎖的含義,所以實際使用應該搭配文字輔助提示。
CodePen Demo -- 屬性選擇器配合偽元素對https協議進行圖文提示
屬性選擇器對文件類型的處理也可以對一些可下載資源進行視覺上 icon 的提示。
a[href$=".doc" i]::before { content: "doc"; background: #a9c4f5; } a[href$=".ppt" i]::before { content: "ppt"; background: #f8e94f; } a[href$=".pdf" i]::before { content: "pdf"; background: #fb807a; } a[href$=".mp3" i]::before { content: "mp3"; background: #cb5cf5; } a[href$=".avi" i]::before { content: "avi"; background: #5f8ffc; }
CodePen Demo -- 屬性選擇器選擇文件名后綴
屬性選擇器對 input 類型的處理屬性選擇器其實對 input 類型的元素是一個很好的幫手,因為 input 常用,且經常搭配很多不同功能的屬性值。
只不過,由于 input 類型無法添加偽元素。所以搭配屬性選擇器更多的通過屬性的各種狀態改變自身的樣式。
簡單舉個例子,譬如:
input[type=text][disabled] { border: 1px solid #aaa; background: #ccc; }
這里,我們選擇了 type=text 并且擁有 disabled 屬性的 input 元素,將它的背景色和邊框色設置為灰色。給與用戶更好的視覺提示。
值得注意的點 注意選擇器優先級 ,.class 與 [class=xxx] 是否等價考慮這個問題,下面兩個選擇器是否等值?
.header { color: red; } [class~="header"] { color: blue; }上述兩個選擇器,作用完全一致。然而,如果是下面這種情況,兩者就不一樣了:
#header{ color: red; } [id="header"] { color: blue; }這里,ID 選擇器#header比屬性選擇器[id="header"]的權重更高,雖然兩者能夠選擇同樣的元素,但是兩者并不完全等價。
是否需要引號?考慮下面三種情況,是否一致?
[class="header"]{ ... } [class="header"]{ ... } [class=header]{ ... }事實上,從 HTML2 開始,不添加引號的寫法就已經得到支持,所以上述三種寫法都是正確的。
然而,能夠不使用引號也是有限制的,再看看下面這種寫法:
a[href=bar] { ... } a[href^=http://] {... }第二個選擇器是個無效選擇器,:// 不引起來的話會識別錯誤,必須使用引號引起來像這樣a[href^="http://"] ,這里具體的原因可以看看這篇文章:Unquoted attribute value validator。
所以保險起見,建議都加上引號。
CSS 語義化編寫”具有語義的HTML”原則是現代、專業前端開發的一個基礎。當然,我們經常談論到的都是 HTML 語義化。
那么,CSS 需要語義化嗎?CSS 有語義化嗎?例如上述的例子,使用特定的類名或者 id 選擇器皆可完成。那么使用屬性選擇器的理由是什么?
我的理解是,屬性(attribute)本身已經具有一定的語義,表達了元素的某些特征或者功能,利用屬性選取元素再進行對該屬性值的特定操作,一定程度上也可以輔助提升代碼的語義化。至少的提升了 CSS 代碼的可讀性。但是 CSS 是否需要語義化這個問題就見仁見智了。
最后這里有幾篇文章還涵蓋了很多其他方面使用,可以對比觀看:
Semantic CSS With Intelligent Selectors
Splicing HTML’s DNA With CSS Attribute Selectors
更多精彩 CSS 技術文章匯總在我的 Github -- iCSS ,持續更新,歡迎點個 star 訂閱收藏。
好了,本文到此結束,希望對你有幫助 :)
如果還有什么疑問或者建議,可以多多交流,原創文章,文筆有限,才疏學淺,文中若有不正之處,萬望告知。
最后,新開通的公眾號求關注,形式希望是更短的篇幅,質量更高一些的技巧類文章,包括但不局限于 CSS:
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/114870.html
相關文章
CSS選擇器
摘要:優先級相同,與元素近的選擇器生效。使用建議建議說明避免將通用選擇器作為通用選擇器。避免選擇器用標簽。避免使用子選擇器。后代選擇器是開銷最最最最大的。 看了一下最近寫的css代碼,發現基本只用到了id選擇器(js里)、后代選擇器和類選擇器(因為聽大牛推薦使用類選擇器,然后就開始大篇幅使用。。。)。所以想深入學習一下css選擇器和css的效率優化,先記錄所學的一部分,以備后續補充。 選擇器...
你對CSS權重真的足夠了解嗎?
摘要:如果兩個權重不同的選擇器作用在同一元素上,權重值高的規則生效選擇器可能會包含一個或者多個與權重相關的計算點,若經過權重值計算得到的權重值越大,則認為這個選擇器的權重高。 前言 css權重很多人都聽過,也了解一些,但是很多人對具體的規則或者說再深如一些關于css權重的問題,可能會不那么清楚。日常開發中,或多或少都會遇到css規則不生效的問題,為了讓我們能夠減少調試css規則的時間,深刻理...
瀏覽器顯示及交互背后的原理
摘要:瀏覽器顯示及交互背后的原理引子因為筆者愛編程的光頭強近期在寫一本關于小程序入門的書籍。不基于瀏覽器背后的運行原理,是很難說清楚虛擬被引入的真正原因和最大好處的。它是瀏覽器的核心部分。 瀏覽器顯示及交互背后的原理 引子 因為筆者(愛編程的光頭強)近期在寫一本關于小程序入門的書籍。其中有一章是介紹虛擬DOM的,它是位于Javascript和真正DOM之間的一層緩存層。為什么引入它,為什么它...
瀏覽器顯示及交互背后的原理
摘要:瀏覽器顯示及交互背后的原理引子因為筆者愛編程的光頭強近期在寫一本關于小程序入門的書籍。不基于瀏覽器背后的運行原理,是很難說清楚虛擬被引入的真正原因和最大好處的。它是瀏覽器的核心部分。 瀏覽器顯示及交互背后的原理 引子 因為筆者(愛編程的光頭強)近期在寫一本關于小程序入門的書籍。其中有一章是介紹虛擬DOM的,它是位于Javascript和真正DOM之間的一層緩存層。為什么引入它,為什么它...
360前端星學習筆記-深入css(2)
摘要:課程一繼承某些元素會自動繼承其父元素的計算值舉例上述代碼,標簽里的就會繼承父元素的,為。顯示繼承給設置顯示繼承根元素下所有元素除獨自設置如的都是。二初始值當向上繼承到頂點還是沒找到值的話,就需要初始值了。 課程ppt 一、css繼承 1.1 某些元素會自動繼承其父元素的計算值 舉例: This is a test of inherit. p { color: #666; ...
發表評論
0條評論
閱讀 2627·2021-10-08 10:04
閱讀 2743·2021-09-06 15:02
閱讀 822·2019-08-30 13:50
閱讀 1555·2019-08-30 13:21
閱讀 2594·2019-08-30 11:15
閱讀 2119·2019-08-29 17:19
閱讀 1585·2019-08-26 13:55
閱讀 1264·2019-08-26 10:15