【譯】用CSS屬性選擇器來拼接HTML的DNA

SuperJolly發表於2018-10-31
CSSHTML

原文連結：www.smashingmagazine.com/2018/10/att…

CSS屬性選擇器非常神奇，它們可以幫你避免新增數不勝數的類名，從另一方面來指出你程式碼裡的一些問題。但是大家不用慌，雖然屬性選擇器複雜且強大，但是很易於學習和使用。在這篇文章，我們將討論它們是如何執行起來的，再教大家一些使用方面的技巧。

一般我們最普遍的使用方法是將HTML屬性放進一個方括號中，稱之為屬性選擇器。例如：

[href] {
    color: chartreuse;
}
複製程式碼

任何具有href屬性且沒有更具體的選擇器的html元素現在都會變成黃綠色。屬性選擇器的特性和類選擇器一致

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

屬性選擇

屬性選擇器可以獨立存在或更具體一點，比如我們需要選擇具有title屬性的所有div標籤。

div[title]
複製程式碼

也可以通過下面操作來選擇具有title屬性的div的子元素：

div [title]
複製程式碼

需要明確的是，中間的空格代表著是後臺選擇器，即選擇具有該屬性的元素的子元素。我們也可以更精確一點，來選擇想要的屬性值：

div[title="dna"]
複製程式碼

大多數情況下，屬性選擇器不需要引號，但我會使用它們，因為我相信它可以提供可讀性並確保具有良好的相容性

如果你想從經過空格分割後的列表裡選擇具有"dna"字元的屬性值，比如“my beautiful dna”或“mutating dna is fun!”，可以在等號前新增一個波浪號`~`：

div[title~="dna"]
複製程式碼

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

[title$="dna"]
複製程式碼

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

[title^="dna"]
複製程式碼

如果你想完全匹配一個值開頭的完整單詞，可以使用管道符來做。比如你不想選擇一個“genealogy”的title，但仍然想選擇“gene”和“gene-data”：

[title|="gene"]
複製程式碼

還有一個匹配任何子字串的模糊搜尋屬性運算子`*`：

[title*="dna"]
複製程式碼

最後要知道的是，您可以新增一個標誌，讓屬性搜尋不區分大小寫。 在結束方括號之前新增`i`：

[title*="DNA" i]
複製程式碼

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

比如你需要找到a標籤，它有一個title屬性，並且有一個以“genes”結尾的class類，該如何寫呢？

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;
}
複製程式碼

上面的程式碼在滑鼠懸停時將顯示一串自定義的字串。

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

一般使用技巧

輸入型別的設定

您可以不同地設定輸入型別，例如電子郵件與電話：

input[type="email"] {
   color: papayawhip;
}
input[type="tel"] {
   color: thistle;
}
複製程式碼

顯示手機號碼連結

您可以隱藏特定尺寸的電話號碼並顯示電話連結，以便在電話上輕鬆撥打電話：

span.phone {
   display: none;
}
a[href^="tel"] {
   display: block;
}
複製程式碼

內部連結vs外部連結，安全連結vs非安全連結

您可以區別對待內部和外部連結，並將安全連結設定為與不安全連結不同：

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非常有用。它還使得連續下載大量檔案的工作流程更加容易。下載屬性的缺點是沒有預設的視覺效果將其與更傳統的連結區分開來。通常這是你想要的，但如果不是，你可以做類似下面的事情：

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;
}
複製程式碼

顯示檔案型別

預設情況下，檔案型別輸入標籤的可接受檔案列表是不可見的。通常，我們使用偽元素來公開它們，雖然你不能在大多數輸入標籤上（或者在Firefox或Edge中）使用偽元素，但是你可以在檔案輸入上使用它們：

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

html手風琴選單

details和summary標籤是一種只用HTML做擴充套件/手風琴選單的方法，details包括了summary標籤和手風琴開啟時要展示的內容。點選summary會展開details標籤並新增open屬性，我們可以通過open屬性輕鬆地為開啟的details標籤設定樣式：

<details>
  <summary>List of Genes</summary>
    Roddenberry
    Hackman
    Wilder
    Kelly
    Luen Yang
    Simmons
</details>
複製程式碼
details[open] {
   background-color: hotpink;
}
複製程式碼

列印連結

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;
}
複製程式碼

診斷

這些選項用於幫助我們在構建過程中或在嘗試修復問題時在本地識別問題。將這些內容放在我們的生產網站上會使使用者產生錯誤。

沒有controls屬性的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檔案

web頁面可以是內容管理系統和外掛，框架和程式碼的集合，Ted 在度假時寫道，確定哪些JavaScript非同步載入以及哪些不載入可以幫助您專注於提高頁面效能：

script[src]:not([async]) {
  display: block;
  width: 100%;
  height: 1em;
  background-color: red;
}
script:after {
  content: attr(src);
}
複製程式碼

Javascript事件

您還可以突出顯示具有JavaScript事件屬性的元素，我在這裡舉例OnMouseOver屬性，但它適用於任何JavaScript事件屬性：

[OnMouseOver] {
   color: burlywood;
}
[OnMouseOver]:after {
   content: "JS: " attr(OnMouseOver);
}
複製程式碼

相關文章