怎么使用CSS屬性選擇器來(lái)拼接HTML的DNA

這篇文章主要介紹了怎么使用CSS屬性選擇器來(lái)拼接HTML的DNA，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

CSS屬性選擇器非常神奇，它們可以幫你避免添加數(shù)不勝數(shù)的類(lèi)名，從另一方面來(lái)指出你代碼里的一些問(wèn)題。但是大家不用慌，雖然屬性選擇器復(fù)雜且強(qiáng)大，但是很易于學(xué)習(xí)和使用。在這篇文章，我們將討論它們是如何運(yùn)行起來(lái)的，再教大家一些使用方面的技巧。

一般我們最普遍的使用方法是將HTML屬性放進(jìn)一個(gè)方括號(hào)中，稱(chēng)之為屬性選擇器。例如：

[href] {
    color: chartreuse;
}

任何具有href屬性且沒(méi)有更具體的選擇器的html元素現(xiàn)在都會(huì)變成黃綠色。屬性選擇器的特性和類(lèi)選擇器一致

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

屬性選擇

屬性選擇器可以獨(dú)立存在或更具體一點(diǎn)，比如我們需要選擇具有title屬性的所有div標(biāo)簽。

div[title]

也可以通過(guò)下面操作來(lái)選擇具有title屬性的div的子元素：

div [title]

需要明確的是，中間的空格代表著是后臺(tái)選擇器，即選擇具有該屬性的元素的子元素。我們也可以更精確一點(diǎn)，來(lái)選擇想要的屬性值：

div[title="dna"]

大多數(shù)情況下，屬性選擇器不需要引號(hào)，但我會(huì)使用它們，因?yàn)槲蚁嘈潘梢蕴峁┛勺x性并確保具有良好的兼容性

如果你想從經(jīng)過(guò)空格分割后的列表里選擇具有"dna"字符的屬性值，比如“my beautiful dna”或“mutating dna is fun!”，可以在等號(hào)前添加一個(gè)波浪號(hào)`~`：

div[title~="dna"]

您可以選擇“dontblamemeblamemydna”或“his-stupidity-is-from-upbringing-not-dna”之類(lèi)的標(biāo)題，然后使用美元符號(hào)`$`來(lái)匹配title的結(jié)尾：

[title$="dna"]

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

[title^="dna"]

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

[title|="gene"]

還有一個(gè)匹配任何子字符串的模糊搜索屬性運(yùn)算符`*`：

[title*="dna"]

最后要知道的是，您可以添加一個(gè)標(biāo)志，讓屬性搜索不區(qū)分大小寫(xiě)。 在結(jié)束方括號(hào)之前添加`i`：

[title*="DNA" i]

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

比如你需要找到 a 標(biāo)簽，它有一個(gè)title屬性，并且有一個(gè)以“genes”結(jié)尾的class類(lèi)，該如何寫(xiě)呢？

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

我們不僅可以選擇HTML元素的屬性，還可以使用偽“科學(xué)”（即偽元素和內(nèi)容聲明）來(lái)打印出文本：

<span class="joke" title="Gene Editing!">What&rsquo;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)懸停時(shí)將顯示一串自定義的字符串。

現(xiàn)在我們已經(jīng)看到了如何使用屬性選擇器進(jìn)行選擇，讓我們看看一些用例。我把它們分為兩類(lèi)： 一般使用技巧 和 診斷 。

一般使用技巧

輸入類(lèi)型的設(shè)置

您可以不同地設(shè)置輸入類(lèi)型，例如電子郵件與電話：

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

顯示手機(jī)號(hào)碼鏈接

您可以隱藏特定尺寸的電話號(hào)碼并顯示電話鏈接，以便在電話上輕松撥打電話：

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

內(nèi)部鏈接vs外部鏈接，安全鏈接vs非安全鏈接

您可以區(qū)別對(duì)待內(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給我們的一個(gè)屬性是“下載”，它告訴瀏覽器，你猜對(duì)了，下載該文件而不是試圖打開(kāi)它。這對(duì)于您希望人們?cè)L問(wèn)但不希望它們立即打開(kāi)的PDF和DOC非常有用。它還使得連續(xù)下載大量文件的工作流程更加容易。下載屬性的缺點(diǎn)是沒(méi)有默認(rèn)的視覺(jué)效果將其與更傳統(tǒng)的鏈接區(qū)分開(kāi)來(lái)。通常這是你想要的，但如果不是，你可以做類(lèi)似下面的事情：

a[download]:after { 
   content: url(download-arrow.svg);
}

您還可以使用不同的圖標(biāo)（如PDF與DOCX與ODF等）來(lái)傳達(dá)文件類(lèi)型：

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

您還可以通過(guò)堆疊屬性選擇器確保這些圖標(biāo)僅在可下載鏈接上：

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

覆蓋或重新使用已廢棄/棄用的代碼

我們都遇到了過(guò)時(shí)代碼的舊網(wǎng)站,在HTML5之前，您可能需要覆蓋甚至重新應(yīng)用作為屬性實(shí)現(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;
}

顯示文件類(lèi)型

默認(rèn)情況下，文件類(lèi)型輸入標(biāo)簽的可接受文件列表是不可見(jiàn)的。通常，我們使用偽元素來(lái)公開(kāi)它們，雖然你不能在大多數(shù)輸入標(biāo)簽上（或者在Firefox或Edge中）使用偽元素，但是你可以在文件輸入上使用它們：

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

html手風(fēng)琴菜單

details 和 summary 標(biāo)簽是一種只用HTML做擴(kuò)展/手風(fēng)琴菜單的方法， details 包括了 summary 標(biāo)簽和手風(fēng)琴打開(kāi)時(shí)要展示的內(nèi)容。點(diǎn)擊 summary 會(huì)展開(kāi) details 標(biāo)簽并添加 open 屬性，我們可以通過(guò)open屬性輕松地為打開(kāi)的 details 標(biāo)簽設(shè)置樣式：

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

自定義工具

使用屬性選擇器創(chuàng)建自定義工具提示既有趣又簡(jiǎn)單：

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

診斷

這些選項(xiàng)用于幫助我們?cè)跇?gòu)建過(guò)程中或在嘗試修復(fù)問(wèn)題時(shí)在本地識(shí)別問(wèn)題。將這些內(nèi)容放在我們的生產(chǎn)網(wǎng)站上會(huì)使用戶產(chǎn)生錯(cuò)誤。

沒(méi)有controls屬性的audio

我不經(jīng)常使用音頻標(biāo)簽，但是當(dāng)我使用它時(shí)，我經(jīng)常忘記包含controls屬性。 結(jié)果：沒(méi)有顯示任何內(nèi)容。如果您在Firefox中工作，如果您隱藏了音頻元素，或者語(yǔ)法或其他一些問(wèn)題阻止它出現(xiàn)（僅適用于Firefox），此代碼可以幫助您解決問(wèn)題：

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

沒(méi)有alt替代文字

沒(méi)有alt屬性的圖片是可訪問(wèn)性的噩夢(mèng)，只需查看頁(yè)面就很難找到它們，但如果添加它們，它們就會(huì)彈出來(lái)（當(dāng)頁(yè)面圖片加載失敗時(shí)，alt文字可以更好的解釋圖片的作用）：

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

異步Javascript文件

web頁(yè)面可以是內(nèi)容管理系統(tǒng)和插件，框架和代碼的集合，Ted 在度假時(shí)寫(xiě)道，確定哪些JavaScript異步加載以及哪些不加載可以幫助您專(zhuān)注于提高頁(yè)面性能：

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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“怎么使用CSS屬性選擇器來(lái)拼接HTML的DNA”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!