用 CSS 屬性選擇器拼接 HTML 的 DNA

在我職業生涯的大部分時間裡，屬性選擇器比科學更神奇。 我會盯著 CSS 以在打印樣式表中輸出鏈接，目瞪口呆，什麼也不懂。 我會盡職盡責地複制，並將其粘貼到我的打印樣式表中，然後跑出去扔掉任何項目是最大的燃燒垃圾堆。

但是你不必再盯著 CSS 屬性選擇器了。 在本文結束時，您將使用它們在您的站點上運行診斷程序，修復其他無法解決的問題，並生成如此先進的技術體驗，它們就像魔術一樣。 你可能認為我的承諾太多了，你是對的，但是一旦你了解了屬性選擇器的強大功能，你可能會覺得自己在誇大其詞。

在最基本的層面上，您將 HTML 屬性放在方括號中，並將其稱為屬性選擇器，如下所示：

 [href] { color: chartreuse; }

任何具有href且沒有更具體選擇器的元素的文本現在都會神奇地變成黃綠色。 屬性選擇器的特異性與類相同。

注意：有關 CSS 特異性的籠式比賽的更多信息，您可以閱讀“CSS 特異性：您應該知道的事情”，或者如果您喜歡星球大戰：“CSS 特異性戰爭”。

但是你可以用屬性選擇器做更多的事情。 就像您的 DNA 一樣，它們具有內置邏輯來幫助您選擇各種屬性組合和值。 它們不僅可以像標籤、類或 id 選擇器那樣精確匹配，還可以匹配任何屬性，甚至是屬性中的字符串值。

屬性選擇

屬性選擇器可以獨立存在或更具體，即如果您需要選擇所有具有title屬性的div標籤。

 div[title]

但是您也可以通過執行以下操作來選擇具有標題的 div 的子級：

 div [title]

需要明確的是，它們之間沒有空格意味著屬性在同一個元素上（就像沒有空格的元素和類一樣），它們之間的空格意味著後代選擇器，即選擇具有該屬性的元素的子元素。

您可以更精細地選擇屬性，包括屬性值。

 div[title="dna"]

上面選擇了所有具有“dna”確切標題的 div。 不會選擇“dna is awesome”或“dnamutation”的標題，儘管有選擇器算法可以處理每種情況（以及更多）。 我們很快就會講到這些。

注意：在大多數情況下，屬性選擇器中不需要引號，但我會使用它們，因為我相信它可以提高清晰度並確保邊緣情況正常工作。

如果您想從空格分隔的列表中選擇“dna”，例如“my beautiful dna”或“mutating dna is fun！” 您可以在等號前面添加一個波浪號或“波浪線”，我喜歡這樣稱呼它。

 div[title~="dna"]

您可以選擇諸如“dontblameblamemydna”或“his-stupidity-is-from-upbringing-not-dna”之類的標題，然後您可以使用美元符號 $ 來匹配標題的結尾。

 [title$="dna"]

要匹配屬性值的前面，例如“dnamutants”或“dna-splicing-for-all”的標題，請使用插入符號。

 [title^="dna"]

雖然精確匹配很有幫助，但選擇可能太緊，並且插入符號前面的匹配可能太寬而無法滿足您的需求。 例如，您可能不想選擇“genealogy”的標題，但仍然選擇“gene”和“gene-data”。 管道字符（或豎線）就是這樣； 它進行完全匹配，但包括完全匹配後跟破折號的情況。

 [title|="gene"]

最後，有一個完整的搜索屬性運算符可以匹配任何子字符串。

 [title*="dna"]

但要明智地使用它，因為上面會匹配“I-like-my-dna-like-my-meat-rare”以及“edna”、“kidnapping”和“echidnas”（這是 Edna 真的不應該做的事情。 )

使這些屬性選擇器更加強大的是它們是可堆疊的——允許您選擇具有多個匹配因子的元素。

但是你需要找到a有標題並且有一個以“genes”結尾的類的標籤嗎？ 這是如何做：

 a[title][class$="genes"]

您不僅可以選擇 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; }

上面的代碼將顯示懸停時寫的最糟糕的笑話之一的答案（是的，我自己寫的，是的，稱它為“笑話”是慷慨的）。

最後要知道的是，您可以添加一個標誌來使屬性搜索不區分大小寫。 在右方括號之前添加一個i 。

 [title*="DNA" i]

因此它將匹配“dna”、“DNA”、“dna”和任何其他變體。

唯一的缺點是i僅適用於 Firefox、Chrome、Safari、Opera 和少數移動瀏覽器。

現在我們已經了解瞭如何使用屬性選擇器進行選擇，讓我們看一些用例。 我將它們分為兩類：一般用途和診斷。

一般用途

按輸入類型的樣式

您可以設置不同的輸入類型，例如電子郵件與電話。

 input[type="email"] { color: papayawhip; } input[type="tel"] { color: thistle; }

顯示電話鏈接

您可以隱藏特定大小的電話號碼並改為顯示電話鏈接，以便在電話上更輕鬆地撥打電話。

 span.phone { display: none; } a[href^="tel"] { display: block; }

內部鏈接與外部鏈接，安全與不安全

您可以區別對待內部和外部鏈接，並將安全鏈接的樣式與不安全的鏈接區別開來。

 a[href^="http"]{ color: bisque; } a:not([href^="http"]) { color: darksalmon; } a[href^="https://"]:after { content: url(unlock-icon.svg); } a[href^="https://"]:after { content: url(lock-icon.svg); }

下載圖標

HTML5 給我們的一個屬性是“下載”，它告訴瀏覽器，你猜對了，下載那個文件而不是試圖打開它。 這對於您希望人們訪問但不希望他們現在打開的 PDF 和 DOC 很有用。 它還簡化了連續下載大量文件的工作流程。 download屬性的缺點是沒有默認視覺效果可以將其與更傳統的鏈接區分開來。 通常這是您想要的，但如果不是，您可以執行以下操作。

 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 之前實現為屬性的樣式。

 <div bgcolor="#000000" color="#FFFFFF">Old, holey genes</div> div[bgcolor="#000000"] { /*override*/ background-color: #222222 !important; } div[color="#FFFFFF"] { /*reapply*/ color: #FFFFFF; }

覆蓋特定的內聯樣式

有時您會遇到使作品變得混亂的內聯樣式，但它們來自您無法控制的代碼。 應該說，如果您可以更改它們，那將是理想的，但如果您不能，這裡有一個解決方法。

注意：如果您知道要覆蓋的確切屬性和值，並且希望在它出現的任何地方覆蓋它，則此方法效果最佳。

對於這個例子，元素的邊距以像素為單位設置，但需要擴展並以em為單位設置，以便在用戶更改默認字體大小時元素可以重新正確調整。

 <divTeenage Mutant Ninja Myrtle</div> div[style*="margin: 8px"] { margin: 1em !important; }

注意：使用此方法時應格外小心，因為如果您需要覆蓋此樣式，您將陷入!important戰爭並且小貓會死去。

顯示文件類型

默認情況下，文件輸入的可接受文件列表是不可見的。 通常，我們會使用偽元素來公開它們，儘管您不能在大多數input標籤（或根本在 Firefox 或 Edge 中）上使用偽元素，但您可以在文件輸入中使用它們。

 <input type="file" accept="pdf,doc,docx"> [accept]:after { content: "Acceptable file types: " attr(accept); }

HTML 手風琴菜單

未廣為人知的details和summary標籤二重奏是一種僅使用 HTML 來製作可擴展/手風琴菜單的方法。 詳細信息包含summary標記和您想要在手風琴打開時顯示的內容。 單擊摘要會展開detail標籤並添加一個打開屬性。 open 屬性可以輕鬆地為打開的details標籤設置與關閉的details信息標籤不同的樣式。

 <details> <summary>List of Genes</summary> Roddenberry Hackman Wilder Kelly Luen Yang Simmons </details>

 details[open] { background-color: hotpink; }

打印鏈接

以打印樣式顯示 URL 使我走上了理解屬性選擇器的道路。 您現在應該知道如何自己構建它。 您只需選擇所有帶有href a標籤，添加一個偽元素，然後使用attr()和content打印它們。

 a[href]:after { content: " (" attr(href) ") "; }

自定義工具提示

使用屬性選擇器創建自定義工具提示既有趣又容易（好吧，如果你像我一樣是書呆子，這很有趣，但無論哪種方式都很容易）。

注意：這段代碼應該能讓你大致了解，但可能需要對間距、填充和配色方案進行一些調整，具體取決於你的站點環境以及你是否比我有更好的品味。

 [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; }

訪問密鑰

網絡的一大優點是它為訪問信息提供了許多不同的選項。 一個很少使用的屬性是設置accesskey的能力，以便可以通過組合鍵和accesskey設置的字母直接訪問該項目（確切的組合鍵取決於瀏覽器）。 但是沒有簡單的方法可以知道網站上設置了哪些密鑰。

以下代碼將在:focus上顯示這些鍵。 我不使用hover ，因為大多數時候需要訪問accesskey的人是那些使用鼠標有困難的人。 您可以將其添加為第二個選項，但請確保它不是唯一的選項。

 a[accesskey]:focus:after { content: " AccessKey: " attr(accesskey); }

診斷

這些選項用於幫助您在構建過程中或在嘗試修復問題時在本地識別問題。 將這些放在您的生產站點上會使錯誤暴露給您的用戶。

沒有控制的音頻

我不經常使用audio標籤，但是當我使用它時，我經常忘記包含controls屬性。 結果：什麼都沒有顯示。 如果您在 Firefox 中工作，則此代碼可以幫助您確定是否隱藏了音頻元素，或者語法或其他問題阻止它出現（它僅適用於 Firefox）。

 audio:not([controls]) { width: 100px; height: 20px; background-color: chartreuse; display: block; }

沒有替代文字

沒有替代文字的圖像是物流和可訪問性的噩夢。 僅通過查看頁面很難找到它們，但是如果您添加它，它們會立即彈出。

注意：我使用outline而不是border ，因為邊框可能會增加元素的寬度並弄亂佈局。 outline不增加寬度。

 img:not([alt]) { /* no alt attribute */ outline: 2em solid chartreuse; } img[alt=""] { /* alt attribute is blank */ outline: 2em solid cadetblue; }

異步 Javascript 文件

網頁可以是內容管理系統、插件、框架和代碼的集合體，Ted（坐在三個小隔間裡）在度假時寫的，因為網站宕機了，他害怕你的老闆。 弄清楚哪些 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; }

但是，有了所有這些驚人的功能，您認為一定有一個問題。 當然，屬性選擇器只能在 Chrome 中標記或在 Safari 邊緣的 Fiery Foxes 的夜間版本中工作。 這太好了，令人難以置信。 而且，不幸的是，有一個問題。

如果您想在最受歡迎的瀏覽器（即 IE6）中使用屬性選擇器，您將無法做到。 （沒關係；讓眼淚掉下來。不要評判。）幾乎所有其他地方你都可以去。 屬性選擇器是 CSS 2.1 規範的一部分，因此已經在瀏覽器中使用了十年的大部分時間。

所以這些選擇器對你來說應該不再是神奇的，而是作為一種足夠先進的技術來揭示的。 它們比魔法更科學，現在你知道了它們最深的秘密，這取決於你。 走出去，在網絡上創造神秘的科學奇蹟。