如題。但是不要擔(dān)心，雖然屬性選擇器非常復(fù)雜和強大，但是它們很容易學(xué)習(xí)和使用。在本文中，我們將討論它們是如何運行的，并給出一些如何使用它們的想法。
通常將 HTML 屬性放在方括號中，稱為屬性選擇器，如下：這樣任何具有href屬性的且沒有更特定選擇器的元素的文本顏色都會是紅色的。屬性選擇器的特性與類相同。注:更多關(guān)于籠匹配的CSS特異性，你可以閱讀CSS特性:你應(yīng)該知道的事情，或者如果你喜歡星球大戰(zhàn):CSS特性戰(zhàn)爭。但是你可以使用屬性選擇器做得更多。就像你的 DNA 一樣，它們有內(nèi)在的邏輯來幫助你選擇各種屬性組合和值。它們可以匹配屬性中的任何屬性，甚至字符串值，而不是像標(biāo)簽、類或id選擇器那樣精確匹配。屬性選擇器
屬性選擇器可以獨立存在，更具體地說，如果需要選擇所有具有title屬性的div標(biāo)簽，可以這么做：但你也可以通過以下操作選擇具有 title 屬性的 div 的子元素需要說明的是，它們之間沒有空格意味著屬性位于相同的元素上(就像元素和類之間沒有空格一樣)，而它們之間的空格意味著后代選擇器，即選擇具有該屬性的元素的子元素。上面選擇了所有具有確切名稱dna的div,雖然有選擇器算法可以處理每種情況（以及更多），但這里不會選擇“dna is awesome”或“dnamutation”的標(biāo)題。注意:在大多數(shù)情況下，屬性選擇器中不需要引號，但是我使用它們，因為我相信它可以提高清代碼的可讀性，并確保邊界用例能夠正常工作。如果你想選擇 title 包含 dna的元素，如 “my beautiful dna” 或者 “mutating dna is fun!” ，可以使用波浪號（~）。如果你想匹配以 dna 結(jié)尾的 title,如 “dontblamemeblamemydna” 或 “his-stupidity-is-from-upbringing-not-dna” ，剛可以使用$標(biāo)志符：如果你想匹配以 dna 開頭的 title,如 “dnamutants” 或 “dna-splicing-for-all” ，剛可以使用^標(biāo)志符：雖然精確匹配是有幫助的，但它可能選擇太緊，并且^符號匹配可能太寬而無法滿足你的需要。 例如，可能不想選擇 “genealogy” 的標(biāo)題，但仍然選擇“gene”和“gene-data”。 管道特征(|)就是這樣，屬性中必須是完整且唯一的單詞，或者以-分隔開。最后，還有一個匹配任何子字符串的模糊搜索屬性操作符，屬性中做字符串拆分，只要能拆出來dna這個詞就行:使這些屬性選擇器更加強大的是，它們是可堆疊的，允許你選擇具有多個匹配因子的元素。如果你需要找到一個a 標(biāo)簽，它有一個 title ，并且有一個以“genes” 結(jié)尾的 class,可以使用如下方式：你不僅可以選擇 HTML 元素的屬性，還可以使用偽類型元素來打印出文本：<span class='joke' title='Gene Editing!'>What’s the first thing a biotech journalist does after finishing the first draft of an article?</span>
.joke:hover:after { content: 'Answer:' attr(title); display: block;}
上面的代碼在鼠標(biāo)懸停時將顯示一串自定義的字符串。最后要知道的是，您可以添加一個標(biāo)志，讓屬性搜索不區(qū)分大小寫。 在結(jié)束方括號之前添加i：現(xiàn)在我們已經(jīng)看到了如何使用屬性選擇器進行選擇，讓我們看看一些用例。 我將它們分為兩類：一般用途和診斷。一般用途
輸入類型樣式的設(shè)置
你可以對輸入類型使用不同的樣式，例如電子郵件和電話。input[type='email'] { color: papayawhip;}input[type='tel'] { color: thistle;}
顯示電話鏈接
你可以隱藏特定尺寸的電話號碼并顯示電話鏈接，以便在手機上輕松撥打電話。span.phone { display: none;}a[href^='tel'] { display: block;}
內(nèi)部鏈接 vs 外部鏈接，安全鏈接 vs 非安全鏈接
你可以區(qū)別對待內(nèi)部和外部鏈接，并將安全鏈接設(shè)置為與不安全鏈接不同：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);}
下載圖標(biāo)
HTML5 給我們的一個屬性是“下載”，它告訴瀏覽器，你猜對了，下載該文件而不是試圖打開它。這對于你希望人們訪問但不希望它們立即打開的 PDF 和 DOC 非常有用。它還使得連續(xù)下載大量文件的工作流程更加容易。下載屬性的缺點是沒有默認(rèn)的視覺效果將其與更傳統(tǒng)的鏈接區(qū)分開來。通常這是你想要的，但如果不是，你可以做類似下面的事情：a[download]:after { content: url(download-arrow.svg);}
還可以使用不同的圖標(biāo)（如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);}
你還可以通過疊加屬性選擇器來確保這些圖標(biāo)只出現(xiàn)在可下載鏈接上。a[download][href$='pdf']:after { content: url(pdf-icon.svg);}
覆蓋或重新使用已廢棄/棄用的代碼
我們都遇到過時代碼過時的舊網(wǎng)站，在 HTML5 之前，你可能需要覆蓋甚至重新應(yīng)用作為屬性實現(xiàn)的樣式。<div bgcolor='#000000' color='#FFFFFF'>Old, holey genes</div>
div[bgcolor='#000000'] { /*override*/ background-color: #222222 !important;}div[color='#FFFFFF'] { /*reapply*/ color: #FFFFFF;}
重寫特定的內(nèi)聯(lián)樣式
有時候你會遇到一些內(nèi)聯(lián)樣式，這些樣式會影響布局，但這些內(nèi)聯(lián)樣式我們又沒修改。那么以下是一種方法。如果你道要覆蓋的確切屬性和值，并且希望在它出現(xiàn)的任何地方覆蓋它，那么這種方法的效果最好。對于此示例，元素的邊距以像素為單位設(shè)置，但需要在 em 中進行擴展和設(shè)置，以便在用戶更改默認(rèn)字體大小時可以正確地重新調(diào)整元素。<div style='color: #222222; margin: 8px; background-color: #EFEFEF;'Teenage Mutant Ninja Myrtle</div>div[style*='margin: 8px'] { margin: 1em !important;}
顯示文件類型
默認(rèn)情況下，文件輸入的可接受文件列表是不可見的。 通常，我們使用偽元素來暴露它們：<input type='file' accept='pdf,doc,docx'>
[accept]:after { content: 'Acceptable file types: ' attr(accept);}
html 手風(fēng)琴菜單
details和summary標(biāo)簽是一種只用HTML做擴展/手風(fēng)琴菜單的方法，details 包括了summary標(biāo)簽和手風(fēng)琴打開時要展示的內(nèi)容。點擊summary會展開details標(biāo)簽并添加open屬性，我們可以通過open屬性輕松地為打開的details標(biāo)簽設(shè)置樣式：details[open] { background-color: hotpink;}
打印鏈接
在打印樣式中顯示URL使我走上了理解屬性選擇器的道路。 你現(xiàn)在應(yīng)該知道如何自己構(gòu)建它， 你只需選擇帶有href的所有標(biāo)簽，添加偽元素，然后使用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)點是它提供了許多不同的信息訪問選項。一個很少使用的屬性是設(shè)置accesskey的能力，這樣就可以通過鍵組合和accesskey設(shè)置的字母直接訪問該項目(確切的鍵組合取決于瀏覽器)。但是要想知道網(wǎng)站上設(shè)置了哪些鍵并不是件容易的事下面的代碼將顯示這些鍵:focus。我不使用鼠標(biāo)懸停，因為大多數(shù)時候需要accesskey的人是那些使用鼠標(biāo)有困難的人。你可以將其添加為第二個選項，但要確保它不是惟一的選項。a[accesskey]:focus:after { content: ' AccessKey: ' attr(accesskey);}
診斷
這些選項用于幫助我們在構(gòu)建過程中或在嘗試修復(fù)問題時在本地識別問題。將這些內(nèi)容放在我們的生產(chǎn)網(wǎng)站上會使用戶產(chǎn)生錯誤。沒有 controls 屬性的 audio
我不經(jīng)常使用audio標(biāo)簽，但是當(dāng)我使用它時，我經(jīng)常忘記包含controls屬性。 結(jié)果：沒有顯示任何內(nèi)容。 如果你在 Firefox，如果隱藏了音頻元素，或者語法或其他一些問題阻止它出現(xiàn)（僅適用于Firefox），此代碼可以幫助你解決問題：audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block;}
沒有 alt 文本
沒有 alt 文本的圖像是可訪問性的噩夢。只需查看頁面就很難找到它們，但如果添加它們，它們就會彈出來（當(dāng)頁面圖片加載失敗時，alt文字可以更好的解釋圖片的作用）：img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse;}img[alt=''] { /* alt attribute is blank */ outline: 2em solid cadetblue;}
異步 Javascript 文件
網(wǎng)頁可以是內(nèi)容管理系統(tǒng)和插件，框架和代碼的集合，確定哪些JavaScript異步加載以及哪些不加載可以幫助你專注于提高頁面性能。script[src]:not([async]) { display: block; width: 100%; height: 1em; background-color: red;}script:after { content: attr(src);}
JavaScript 事件元素
你可以突出顯示具有JavaScript事件屬性的元素，以便將它們重構(gòu)到JavaScript文件中。這里我主要關(guān)注OnMouseOver屬性，但是它適用于任何JavaScript事件屬性。[OnMouseOver] { color: burlywood;}[OnMouseOver]:after { content: 'JS: ' attr(OnMouseOver);}
隱藏項
如果需要查看隱藏元素或隱藏輸入的位置，可以使用它們來顯示[hidden], [type='hidden'] { display: block;}
