CSS 屬性選擇器有哪些

這篇文章給大家分享的是有關(guān)CSS 屬性選擇器有哪些的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧。

屬性選擇器非常神奇。它們可以使你擺脫棘手的問(wèn)題，幫助你避免添加類(lèi)，并指出代碼中的一些問(wèn)題。但是不要擔(dān)心，雖然屬性選擇器非常復(fù)雜和強(qiáng)大，但是它們很容易學(xué)習(xí)和使用。在本文中，我們將討論它們是如何運(yùn)行的，并給出一些如何使用它們的想法。

通常將 HTML 屬性放在方括號(hào)中，稱(chēng)為屬性選擇器，如下：

[href] {
   color: red;
}

這樣任何具有href屬性的且沒(méi)有更特定選擇器的元素的文本顏色都會(huì)是紅色的。屬性選擇器的特性與類(lèi)相同。

注:更多關(guān)于籠匹配的CSS特異性，你可以閱讀CSS特性:你應(yīng)該知道的事情，或者如果你喜歡星球大戰(zhàn):CSS特性戰(zhàn)爭(zhēng)。

但是你可以使用屬性選擇器做得更多。就像你的 DNA 一樣，它們有內(nèi)在的邏輯來(lái)幫助你選擇各種屬性組合和值。它們可以匹配屬性中的任何屬性，甚至字符串值，而不是像標(biāo)簽、類(lèi)或id選擇器那樣精確匹配。

屬性選擇器

屬性選擇器可以獨(dú)立存在，更具體地說(shuō)，如果需要選擇所有具有title屬性的p標(biāo)簽，可以這么做：

p[title]

但你也可以通過(guò)以下操作選擇具有 title 屬性的 p 的子元素

p [title]

需要說(shuō)明的是，它們之間沒(méi)有空格意味著屬性位于相同的元素上(就像元素和類(lèi)之間沒(méi)有空格一樣)，而它們之間的空格意味著后代選擇器，即選擇具有該屬性的元素的子元素。

你可以更精細(xì)地選擇具體屬性值的屬性。

p[title="dna"]

上面選擇了所有具有確切名稱(chēng)dna的p,雖然有選擇器算法可以處理每種情況（以及更多），但這里不會(huì)選擇“dna is awesome”或“dnamutation”的標(biāo)題。

注意:在大多數(shù)情況下，屬性選擇器中不需要引號(hào)，但是我使用它們，因?yàn)槲蚁嘈潘梢蕴岣咔宕a的可讀性，并確保邊界用例能夠正常工作。

如果你想選擇 title 包含 dna的元素，如 “my beautiful dna” 或者 “mutating dna is fun!” ，可以使用波浪號(hào)（~）。

p[title~="dna"]

如果你想匹配以 dna 結(jié)尾的 title,如　 “dontblamemeblamemydna” 或 “his-stupidity-is-from-upbringing-not-dna” ，剛可以使用$標(biāo)志符：

[title$="dna"]

如果你想匹配以 dna 開(kāi)頭的 title,如　 “dnamutants” 或 “dna-splicing-for-all” ，剛可以使用^標(biāo)志符：

[title^="dna"]

雖然精確匹配是有幫助的，但它可能選擇太緊，并且^符號(hào)匹配可能太寬而無(wú)法滿足你的需要。 例如，可能不想選擇 “genealogy” 的標(biāo)題，但仍然選擇“gene”和“gene-data”。 管道特征(|)就是這樣，屬性中必須是完整且唯一的單詞，或者以-分隔開(kāi)。

[title|="gene"]

最后，還有一個(gè)匹配任何子字符串的模糊搜索屬性操作符，屬性中做字符串拆分，只要能拆出來(lái)dna這個(gè)詞就行:

[title*="dna"]

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

如果你需要找到一個(gè)a 標(biāo)簽，它有一個(gè) title ，并且有一個(gè)以“genes” 結(jié)尾的 class,可以使用如下方式：

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

你不僅可以選擇 HTML 元素的屬性，還可以使用偽類(lèi)型元素來(lái)打印出文本：

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

上面的代碼在鼠標(biāo)懸停時(shí)將顯示一串自定義的字符串。

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

[title*="DNA" i]

因此它會(huì)匹配dna, DNA, dnA等。

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

一般用途

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

你可以對(duì)輸入類(lèi)型使用不同的樣式，例如電子郵件和電話。

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

顯示電話鏈接

你可以隱藏特定尺寸的電話號(hào)碼并顯示電話鏈接，以便在手機(jī)上輕松撥打電話。

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)表示文件類(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ò)疊加屬性選擇器來(lái)確保這些圖標(biāo)只出現(xiàn)在可下載鏈接上。

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

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

我們都遇到過(guò)時(shí)代碼過(guò)時(shí)的舊網(wǎng)站，在 HTML5 之前，你可能需要覆蓋甚至重新應(yīng)用作為屬性實(shí)現(xiàn)的樣式。

<p bgcolor="#000000" color="#FFFFFF">Old, holey genes</p>

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

重寫(xiě)特定的內(nèi)聯(lián)樣式

有時(shí)候你會(huì)遇到一些內(nèi)聯(lián)樣式，這些樣式會(huì)影響布局，但這些內(nèi)聯(lián)樣式我們又沒(méi)修改。那么以下是一種方法。

如果你道要覆蓋的確切屬性和值，并且希望在它出現(xiàn)的任何地方覆蓋它，那么這種方法的效果最好。

對(duì)于此示例，元素的邊距以像素為單位設(shè)置，但需要在 em 中進(jìn)行擴(kuò)展和設(shè)置，以便在用戶更改默認(rèn)字體大小時(shí)可以正確地重新調(diào)整元素。

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

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

顯示文件類(lèi)型

默認(rèn)情況下，文件輸入的可接受文件列表是不可見(jiàn)的。 通常，我們使用偽元素來(lái)暴露它們：

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

打印鏈接

在打印樣式中顯示URL使我走上了理解屬性選擇器的道路。 你現(xiàn)在應(yīng)該知道如何自己構(gòu)建它， 你只需選擇帶有href的所有標(biāo)簽，添加偽元素，然后使用attr()和content打印它們。

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

便捷鍵

web 的一大優(yōu)點(diǎn)是它提供了許多不同的信息訪問(wèn)選項(xiàng)。一個(gè)很少使用的屬性是設(shè)置accesskey的能力，這樣就可以通過(guò)鍵組合和accesskey設(shè)置的字母直接訪問(wèn)該項(xiàng)目(確切的鍵組合取決于瀏覽器)。但是要想知道網(wǎng)站上設(shè)置了哪些鍵并不是件容易的事

下面的代碼將顯示這些鍵:focus。我不使用鼠標(biāo)懸停，因?yàn)榇蠖鄶?shù)時(shí)候需要accesskey的人是那些使用鼠標(biāo)有困難的人。你可以將其添加為第二個(gè)選項(xiàng)，但要確保它不是惟一的選項(xiàng)。

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

診斷

這些選項(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)常使用audio標(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 文件

網(wǎng)頁(yè)可以是內(nèi)容管理系統(tǒng)和插件，框架和代碼的集合，確定哪些JavaScript異步加載以及哪些不加載可以幫助你專(zhuān)注于提高頁(yè)面性能。

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

JavaScript 事件元素

你可以突出顯示具有JavaScript事件屬性的元素，以便將它們重構(gòu)到JavaScript文件中。這里我主要關(guān)注OnMouseOver屬性，但是它適用于任何JavaScript事件屬性。

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

隱藏項(xiàng)

如果需要查看隱藏元素或隱藏輸入的位置，可以使用它們來(lái)顯示

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

感謝各位的閱讀！關(guān)于CSS 屬性選擇器有哪些就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！