摘要:屬性選擇器非常神奇。屬性選擇器的特性與類相同。現在我們已經看到了如何使用屬性選擇器進行選擇,讓我們看看一些用例。自定義提示使用屬性選擇器創(chuàng)建自定義工具提示既有趣又簡單便捷鍵的一大優(yōu)點是它提供了許多不同的信息訪問選項。
屬性選擇器非常神奇。它們可以使你擺脫棘手的問題,幫助你避免添加類,并指出代碼中的一些問題。但是不要擔心,雖然屬性選擇器非常復雜和強大,但是它們很容易學習和使用。在本文中,我們將討論它們是如何運行的,并給出一些如何使用它們的想法。
想閱讀更多優(yōu)質文章請猛戳GitHub博客,一年百來篇優(yōu)質文章等著你!
通常將 HTML 屬性放在方括號中,稱為屬性選擇器,如下:
[href] { color: red; }
這樣任何具有href屬性的且沒有更特定選擇器的元素的文本顏色都會是紅色的。屬性選擇器的特性與類相同。
注:更多關于籠匹配的CSS特異性,你可以閱讀CSS特性:你應該知道的事情,或者如果你喜歡星球大戰(zhàn):CSS特性戰(zhàn)爭。
但是你可以使用屬性選擇器做得更多。就像你的 DNA 一樣,它們有內在的邏輯來幫助你選擇各種屬性組合和值。它們可以匹配屬性中的任何屬性,甚至字符串值,而不是像標簽、類或id選擇器那樣精確匹配。
屬性選擇器屬性選擇器可以獨立存在,更具體地說,如果需要選擇所有具有title屬性的div標簽,可以這么做:
div[title]
但你也可以通過以下操作選擇具有 title 屬性的 div 的子元素
div [title]
需要說明的是,它們之間沒有空格意味著屬性位于相同的元素上(就像元素和類之間沒有空格一樣),而它們之間的空格意味著后代選擇器,即選擇具有該屬性的元素的子元素。
你可以更精細地選擇具體屬性值的屬性。
div[title="dna"]
上面選擇了所有具有確切名稱dna的div,雖然有選擇器算法可以處理每種情況(以及更多),但這里不會選擇“dna is awesome”或“dnamutation”的標題。
注意:在大多數情況下,屬性選擇器中不需要引號,但是我使用它們,因為我相信它可以提高清代碼的可讀性,并確保邊界用例能夠正常工作。
如果你想選擇 title 包含 dna的元素,如 “my beautiful dna” 或者 “mutating dna is fun!” ,可以使用波浪號(~)。
div[title~="dna"]
如果你想匹配以 dna 結尾的 title,如 “dontblamemeblamemydna” 或 “his-stupidity-is-from-upbringing-not-dna” ,剛可以使用$標志符:
[title$="dna"]
如果你想匹配以 dna 開頭的 title,如 “dnamutants” 或 “dna-splicing-for-all” ,剛可以使用^標志符:
[title^="dna"]
雖然精確匹配是有幫助的,但它可能選擇太緊,并且^符號匹配可能太寬而無法滿足你的需要。 例如,可能不想選擇 “genealogy” 的標題,但仍然選擇“gene”和“gene-data”。 管道特征(|)就是這樣,屬性中必須是完整且唯一的單詞,或者以-分隔開。
[title|="gene"]
最后,還有一個匹配任何子字符串的模糊搜索屬性操作符,屬性中做字符串拆分,只要能拆出來dna這個詞就行:
[title*="dna"]
使這些屬性選擇器更加強大的是,它們是可堆疊的,允許你選擇具有多個匹配因子的元素。
如果你需要找到一個a 標簽,它有一個 title ,并且有一個以“genes” 結尾的 class,可以使用如下方式:
a[title][class$="genes"]
你不僅可以選擇 HTML 元素的屬性,還可以使用偽類型元素來打印出文本:
What’s the first thing a biotech journalist does after finishing the first draft of an article?
.joke:hover:after { content: "Answer:" attr(title); display: block; }
上面的代碼在鼠標懸停時將顯示一串自定義的字符串。
最后要知道的是,您可以添加一個標志,讓屬性搜索不區(qū)分大小寫。 在結束方括號之前添加i:
[title*="DNA" i]
因此它會匹配dna, DNA, dnA等。
現在我們已經看到了如何使用屬性選擇器進行選擇,讓我們看看一些用例。 我將它們分為兩類:一般用途和診斷。
一般用途 輸入類型樣式的設置你可以對輸入類型使用不同的樣式,例如電子郵件和電話。
input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }顯示電話鏈接
你可以隱藏特定尺寸的電話號碼并顯示電話鏈接,以便在手機上輕松撥打電話。
span.phone { display: none; } a[href^="tel"] { display: block; }內部鏈接 vs 外部鏈接,安全鏈接 vs 非安全鏈接
你可以區(qū)別對待內部和外部鏈接,并將安全鏈接設置為與不安全鏈接不同:
a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="http://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }下載圖標
HTML5 給我們的一個屬性是“下載”,它告訴瀏覽器,你猜對了,下載該文件而不是試圖打開它。這對于你希望人們訪問但不希望它們立即打開的 PDF 和 DOC 非常有用。它還使得連續(xù)下載大量文件的工作流程更加容易。下載屬性的缺點是沒有默認的視覺效果將其與更傳統的鏈接區(qū)分開來。通常這是你想要的,但如果不是,你可以做類似下面的事情:
a[download]:after { content: url(download-arrow.svg); }
還可以使用不同的圖標(如PDF與DOCX與ODF等)來表示文件類型,等等。
a[href$="pdf"]:after { content: url(pdf-icon.svg); } a[href$="docx"]:after { content: url(docx-icon.svg); } a[href$="odf"]:after { content: url(open-office-icon.svg); }
你還可以通過疊加屬性選擇器來確保這些圖標只出現在可下載鏈接上。
a[download][href$="pdf"]:after { content: url(pdf-icon.svg); }覆蓋或重新使用已廢棄/棄用的代碼
我們都遇到過時代碼過時的舊網站,在 HTML5 之前,你可能需要覆蓋甚至重新應用作為屬性實現的樣式。
重寫特定的內聯樣式Old, holey genesdiv[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }
有時候你會遇到一些內聯樣式,這些樣式會影響布局,但這些內聯樣式我們又沒修改。那么以下是一種方法。
如果你道要覆蓋的確切屬性和值,并且希望在它出現的任何地方覆蓋它,那么這種方法的效果最好。
對于此示例,元素的邊距以像素為單位設置,但需要在 em 中進行擴展和設置,以便在用戶更改默認字體大小時可以正確地重新調整元素。
div[style*="margin: 8px"] { margin: 1em !important; } 顯示文件類型默認情況下,文件輸入的可接受文件列表是不可見的。 通常,我們使用偽元素來暴露它們:
[accept]:after { content: "Acceptable file types: " attr(accept); }html 手風琴菜單details和summary標簽是一種只用HTML做擴展/手風琴菜單的方法,details 包括了summary標簽和手風琴打開時要展示的內容。點擊summary會展開details標簽并添加open屬性,我們可以通過open屬性輕松地為打開的details標簽設置樣式:
details[open] { background-color: hotpink; }打印鏈接在打印樣式中顯示URL使我走上了理解屬性選擇器的道路。 你現在應該知道如何自己構建它, 你只需選擇帶有href的所有標簽,添加偽元素,然后使用attr()和content打印它們。
a[href]:after { content: " (" attr(href) ") "; }自定義提示使用屬性選擇器創(chuàng)建自定義工具提示既有趣又簡單:
[title] { position: relative; display: block; } [title]:hover:after { content: attr(title); color: hotpink; background-color: slateblue; display: block; padding: .225em .35em; position: absolute; right: -5px; bottom: -5px; }便捷鍵web 的一大優(yōu)點是它提供了許多不同的信息訪問選項。一個很少使用的屬性是設置accesskey的能力,這樣就可以通過鍵組合和accesskey設置的字母直接訪問該項目(確切的鍵組合取決于瀏覽器)。但是要想知道網站上設置了哪些鍵并不是件容易的事
下面的代碼將顯示這些鍵:focus。我不使用鼠標懸停,因為大多數時候需要accesskey的人是那些使用鼠標有困難的人。你可以將其添加為第二個選項,但要確保它不是惟一的選項。
a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }診斷這些選項用于幫助我們在構建過程中或在嘗試修復問題時在本地識別問題。將這些內容放在我們的生產網站上會使用戶產生錯誤。
沒有 controls 屬性的 audio我不經常使用audio標簽,但是當我使用它時,我經常忘記包含controls屬性。 結果:沒有顯示任何內容。 如果你在 Firefox,如果隱藏了音頻元素,或者語法或其他一些問題阻止它出現(僅適用于Firefox),此代碼可以幫助你解決問題:
audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }沒有 alt 文本沒有 alt 文本的圖像是可訪問性的噩夢。只需查看頁面就很難找到它們,但如果添加它們,它們就會彈出來(當頁面圖片加載失敗時,alt文字可以更好的解釋圖片的作用):
img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }異步 Javascript 文件網頁可以是內容管理系統和插件,框架和代碼的集合,確定哪些JavaScript異步加載以及哪些不加載可以幫助你專注于提高頁面性能。
script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red; } script:after { content: attr(src); }JavaScript 事件元素你可以突出顯示具有JavaScript事件屬性的元素,以便將它們重構到JavaScript文件中。這里我主要關注OnMouseOver屬性,但是它適用于任何JavaScript事件屬性。
[OnMouseOver] { color: burlywood; } [OnMouseOver]:after { content: "JS: " attr(OnMouseOver); }隱藏項如果需要查看隱藏元素或隱藏輸入的位置,可以使用它們來顯示
[hidden], [type="hidden"] { display: block; }你的點贊是我持續(xù)分享好東西的動力,歡迎點贊!
交流干貨系列文章匯總如下,覺得不錯點個Star,歡迎 加群 互相學習。
https://github.com/qq44924588...我是小智,公眾號「大遷世界」作者,對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨,在進階的路上,共勉!
關注公眾號,后臺回復福利,即可看到福利,你懂的。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規(guī)行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/104203.html
摘要:屬性選擇器非常神奇。屬性選擇器的特性與類相同。現在我們已經看到了如何使用屬性選擇器進行選擇,讓我們看看一些用例。自定義提示使用屬性選擇器創(chuàng)建自定義工具提示既有趣又簡單便捷鍵的一大優(yōu)點是它提供了許多不同的信息訪問選項。 屬性選擇器非常神奇。它們可以使你擺脫棘手的問題,幫助你避免添加類,并指出代碼中的一些問題。但是不要擔心,雖然屬性選擇器非常復雜和強大,但是它們很容易學習和使用。在本文中,...
摘要:頁面名稱月影功能模塊,請在模塊之間加入注釋,中英文不做要求活動規(guī)則開始活動規(guī)則活動規(guī)則結束自定義函數。參考頁面前端規(guī)范 web前端開發(fā)規(guī)范的意義 提高團隊的協作能力 提高代碼的復用利用率 可以寫出質量更高,效率更好的代碼 為后期維護提供更好的支持 一、命名規(guī)則 命名使用英文語義化,禁止使用特殊字符,禁止使用拼音,禁止使用中英文混合! 項目、目錄、html/css/js等文件命名全...
摘要:頁面名稱月影功能模塊,請在模塊之間加入注釋,中英文不做要求活動規(guī)則開始活動規(guī)則活動規(guī)則結束自定義函數。參考頁面前端規(guī)范 web前端開發(fā)規(guī)范的意義 提高團隊的協作能力 提高代碼的復用利用率 可以寫出質量更高,效率更好的代碼 為后期維護提供更好的支持 一、命名規(guī)則 命名使用英文語義化,禁止使用特殊字符,禁止使用拼音,禁止使用中英文混合! 項目、目錄、html/css/js等文件命名全...
摘要:頁面名稱月影功能模塊,請在模塊之間加入注釋,中英文不做要求活動規(guī)則開始活動規(guī)則活動規(guī)則結束自定義函數。參考頁面前端規(guī)范 web前端開發(fā)規(guī)范的意義 提高團隊的協作能力 提高代碼的復用利用率 可以寫出質量更高,效率更好的代碼 為后期維護提供更好的支持 一、命名規(guī)則 命名使用英文語義化,禁止使用特殊字符,禁止使用拼音,禁止使用中英文混合! 項目、目錄、html/css/js等文件命名全...
閱讀 3921·2021-11-17 09:33
閱讀 3283·2021-10-08 10:05
閱讀 3111·2021-09-22 15:36
閱讀 1140·2021-09-06 15:02
閱讀 2772·2019-08-29 12:45
閱讀 1590·2019-08-26 13:40
閱讀 3399·2019-08-26 13:37
閱讀 420·2019-08-26 13:37