使用這些 CSS 屬性選擇器來提升前端開發效率！

阿里雲最近在作活動，低至2折，有興趣能夠看看：
https://promotion.aliyun.com/...

---

爲了保證的可讀性，本文采用意譯而非直譯。

屬性選擇器很是神奇。它們可使你擺脫棘手的問題，幫助你避免添加類，並指出代碼中的一些問題。可是不要擔憂，雖然屬性選擇器很是複雜和強大，可是它們很容易學習和使用。在本文中，咱們將討論它們是如何運行的，並給出一些如何使用它們的想法。

想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等着你！

一般將 HTML 屬性放在方括號中，稱爲屬性選擇器，以下：

[href] {
   color: red;
}

這樣任何具備href屬性的且沒有更特定選擇器的元素的文本顏色都會是紅色的。屬性選擇器的特性與類相同。

注:更多關於籠匹配的CSS特異性，你能夠閱讀CSS特性:你應該知道的事情，或者若是你喜歡星球大戰:CSS特性戰爭。

可是你可使用屬性選擇器作得更多。就像你的 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 元素的屬性，還可使用僞類型元素來打印出文本：

<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等。

如今咱們已經看到了如何使用屬性選擇器進行選擇，讓咱們看看一些用例。 我將它們分爲兩類：通常用途和診斷。

通常用途

輸入類型樣式的設置

你能夠對輸入類型使用不一樣的樣式，例如電子郵件和電話。

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

重寫特定的內聯樣式

有時候你會遇到一些內聯樣式，這些樣式會影響佈局，但這些內聯樣式咱們又沒修改。那麼如下是一種方法。

若是你道要覆蓋的確切屬性和值，而且但願在它出現的任何地方覆蓋它，那麼這種方法的效果最好。

對於此示例，元素的邊距以像素爲單位設置，但須要在 em 中進行擴展和設置，以便在用戶更改默認字體大小時能夠正確地從新調整元素。

<div style="color: #222222; margin: 8px; background-color: #EFEFEF;"Teenage Mutant Ninja Myrtle</div>

div[style*="margin: 8px"] {
   margin: 1em !important;
}

顯示文件類型

默認狀況下，文件輸入的可接受文件列表是不可見的。 一般，咱們使用僞元素來暴露它們：

<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[open] {
   background-color: hotpink;
}

打印連接

在打印樣式中顯示URL使我走上了理解屬性選擇器的道路。 你如今應該知道如何本身構建它， 你只需選擇帶有href的全部標籤，添加僞元素，而後使用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;
}

便捷鍵

web 的一大優勢是它提供了許多不一樣的信息訪問選項。一個不多使用的屬性是設置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;
}

你的點贊是我持續分享好東西的動力，歡迎點贊！

交流

乾貨系列文章彙總以下，以爲不錯點個Star，歡迎 加羣 互相學習。

https://github.com/qq44924588...

我是小智，公衆號「大遷世界」做者，對前端技術保持學習愛好者。我會常常分享本身所學所看的乾貨，在進階的路上，共勉！

關注公衆號，後臺回覆福利，便可看到福利，你懂的。