精讀《使用 CSS 屬性選擇器》

zhangxiangliang 發(fā)布于2019-08-23 13:41 / 1002人閱讀

摘要：引言雖然現(xiàn)在與更流行，但使用它們會(huì)導(dǎo)致過分依賴濫用做唯一定位，違背了選擇器的初衷。本期精讀的文章是，帶你重新理解強(qiáng)大的選擇器。討論地址是精讀使用屬性選擇器如果你想?yún)⑴c討論，請點(diǎn)擊這里，每周都有新的主題，周末或周一發(fā)布。

1 引言

雖然現(xiàn)在 Css Module 與 Css-in-js 更流行，但使用它們會(huì)導(dǎo)致過分依賴 濫用 class 做唯一定位，違背了 Css 選擇器的初衷。

本期精讀的文章是：attribute-selectors-splicing-html-dna-css，帶你重新理解強(qiáng)大的 Css 選擇器。

2 概要

Css Module 與 Css-in-js 大部分場景使用 className 作為選擇器，那么本文以選擇器為重點(diǎn)，看看選擇器有哪些實(shí)用的用法。

屬性選擇器

如果你想選擇包含 title 屬性的 div：

div[title]

選擇包含 title 屬性的子元素，只需要加個(gè)空格：

div [title]

選擇 title 內(nèi)容是 dna 的元素：

div[title="dna"]

選擇 title 屬性包含 dna 單詞的元素：

注意 dna 需要是單詞，也就是用空格分割，比如 “my beautiful dna” 或 “mutating dna is fun!”

div[title~="dna"]

和正則類似，選擇 title 屬性中，以 dna 結(jié)尾的元素：

div[title$="dna"]

以 dna 開頭：

div[title^="dna"]

如果希望選擇 dna 或 dna-zh，但不希望匹配 dnaer，可以：

這種場景一般用在國際化，比如 en en-us 就可以用 |="en"

div[title|="dna"]

只要包含 dna 這三個(gè)字符就選中：

div[title*="dna"]

真的很像正則，你可以用 i 標(biāo)識匹配時(shí)大小寫不敏感：

div[title*="dna" i]

如果你想找到一個(gè) a 標(biāo)簽，擁有 title 屬性并且 className 以 genes 結(jié)尾，可以這樣：

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

獲取標(biāo)簽的值

可以用 attr 標(biāo)識符拿到當(dāng)前選擇器選中元素的屬性，比如當(dāng) hover 狀態(tài)時(shí)，在文字尾部顯示其 title 屬性：

.joke:hover:after {
  content: "Answer:" attr(title);
  display: block;
}

其它用法

本文還介紹了一些實(shí)用技巧，比如

根據(jù)輸入框類型設(shè)置樣式

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

改變下載標(biāo)簽的 icon

a[download][href$="pdf"]:after {
  content: url(pdf-icon.svg);
}

當(dāng)然也可以選中一些老代碼進(jìn)行樣式重寫，比如：

Old, holey genes

div[bgcolor="#000000"] {
  /*override*/
  background-color: #222222 !important;
}

不過這種用法要謹(jǐn)慎，寫的越多越難以維護(hù)。

結(jié)合一些新標(biāo)簽功能

比如 details 標(biāo)簽是 html 原生的手風(fēng)琴折疊組件：

 List of Genes
 Roddenberry Hackman

我們可以使用屬性選擇器，定義其打開時(shí)的樣式：

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

為沒有 async 標(biāo)記的 script 標(biāo)簽著色，算是友情提示哪兒有錯(cuò)誤：

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

為 JS 事件著色，比如觸發(fā)的鼠標(biāo)事件可以作為選擇器：

[OnMouseOver] {
  color: burlywood;
}
[OnMouseOver]:after {
  content: "JS: " attr(OnMouseOver);
}

選中隱藏元素：

[hidden],
[type="hidden"] {
  display: block;
}

還有更多就不一一列舉了，感興趣的讀者可以跳轉(zhuǎn)到原文繼續(xù)閱讀。大部分內(nèi)容其實(shí)都寫在了 w3school 選擇器參考手冊，只是結(jié)合一篇文章來讀，可以理解得更深刻，同時(shí)文章里確實(shí)有一些新鮮的選擇器，比如 JS 事件選擇器，HTML5 屬性標(biāo)簽選擇器等等。

3 精讀

這篇文章確實(shí)說明了 Css 選擇器的強(qiáng)大性，但回到 css module 或者 css-in-js 的工程代碼里，我們往往難以做太多的實(shí)踐，有如下幾個(gè)原因：

一直在擔(dān)心的 DOM 結(jié)構(gòu)變動(dòng)

業(yè)務(wù)開發(fā)中，大量需求涌入，也許過了一周，DOM 結(jié)構(gòu)就已經(jīng)面目全非了，而且就算是一個(gè)普通的圣杯布局，可能老版本用 Table 布局，后面進(jìn)來一個(gè)年輕小伙子直接用 div + flex 重構(gòu)了，你會(huì)擔(dān)心之前寫的 table 選擇器在某一天全部失效。

也許今天的 div 選擇器，明天因?yàn)檎Z義化改造就換成了 article 標(biāo)簽。

最大原因是 一種視覺界面對應(yīng)的實(shí)現(xiàn)方式太多，不僅標(biāo)簽可以各異，css 屬性還有 table、block、flex、grid 可選，同時(shí) grid 屬性還會(huì)導(dǎo)致視覺結(jié)構(gòu)與 DOM 結(jié)構(gòu)不完全對應(yīng)。

如果你今天用 css 選擇器做了一套完全貼合現(xiàn)在 DOM 結(jié)構(gòu)的 css 文件，這個(gè) css 文件也許是后面 dom 結(jié)構(gòu)改動(dòng)的噩夢。

你敢做全局樣式覆蓋嗎

我們排除標(biāo)簽，僅對屬性做全局覆蓋，的確可以部分繞開 DOM 結(jié)構(gòu)的限制，但是這樣的全局樣式覆蓋，不同的人有不同看法。

小明的團(tuán)隊(duì)非常懂得 css 運(yùn)用，他們每天都會(huì)花一個(gè)小時(shí)討論項(xiàng)目的 css 架構(gòu)，并對通用需求樣式做了抽象，并且每個(gè)人都很認(rèn)可這個(gè)方案，在他們的團(tuán)隊(duì)，一個(gè)非常酷炫的按鈕與動(dòng)畫效果，通過