擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

大家好！我是/小鄭搞碼事/的小鄭

今天和大家聊一下，CSS中屬性選擇器都有哪些，大家可以借此加深對選擇器的印象。

關于屬性選擇器，大概有下面這七種。我們逐個來看一下。

E[attr]

匹配有屬性attr的元素。

比如：a[href]{}

E[attr=val]

attr屬性值等于val。

比如：span[class="error"]{}

E[attr ~= val]

attr屬性值有多個空格分開的值，其中有一個值等于val。

比如：a[title~='db']{}

E[attr^=val]

attr屬性值以val開頭

比如：a[class^="icon-"]{}

E[attr$=val]

attr屬性值以val結尾

比如：a[href$=".html"]{}

E[attr*=val]

attr屬性值含有val

比如：a[href*="?"]{}

E[attr|=val]

attr屬性值由一系列用連字符連拉而且必須是以val開頭。

比如：

<p lang="en-gb"></p>

p[lang|="en"]{}

CSS選擇器（Selector）是用于實現網頁頁面定義的基礎，選擇器的主要作用在于確定指定的單個元素或者一類元素。在獲取元素之后即可以對所獲取的元素進行樣式的定義。最終為用戶呈現不同交互視覺風格的前端頁面。本文主要對常用CSS選擇器基本概念與常用屬性選擇器進行說明與實例展示。

CSS Selector類型劃分

按照W3C技術規范劃分目前CSS Selector主要類型可以劃分為基本選擇器、關系選擇器、偽選擇器三種類型不同的選擇器。目前主要CSS選擇器類型及分類描述如下圖所示：

CSS Selector選擇器主要分類描述如上圖，其中我們較為常用的選擇器主要包括基本選擇器、關系選擇器及偽選擇器中的部分類型。總之，一句話概括的話：選擇器的作用就是從HTML文檔中找出需要設置樣式的一個或者多個HTML元素。

基本常用選擇器

本文中我們選取部分常用選擇器對其語法進行簡單說明，并通過實例進行應用說明與展示。

（一）基本選擇器

基本選擇器中元素選擇器、類選擇器與ID選擇器是較為常用選擇器，也是大部分教材中詳細介紹過的選擇器類型。常用基本選擇器描述如下圖：

屬性選擇器

在基本選擇器中以上4類為常用選擇器，除此之外初學者使用較少但非常重要的選擇器為屬性選擇器。屬性選擇器主要根據元素的屬性確定選擇元素并進行樣式的設置。屬性選擇器主要類型包括7種不同類型選擇器，描述如下圖所示：

CSS屬性選擇器常用的其中方法描述如上圖所示，通過屬性值的選擇方式確定選中的元素，進而實現元素樣式的設置。屬性選擇器說明如下：

以下我們通過實例進行說明，HTML代碼描述如下：

我們在頁面中添加6個不同層，并設置其基本樣式，如上圖所示，通過使用屬性選擇器實現樣式的改變。原始頁面效果如下圖：

1、[attr]選擇器

該選擇器主要根據屬性名稱確定選中的標記，并對其進行設置。我們將示例文件中的前三個div設置ID屬性并以此為選擇條件進行DIV樣式修改。代碼部分如下：

<div id="a">1</div>
<div id="2">2</div>
<div id="3">3</div>

編寫選擇器如下：

[id]{background-color: red;}

通過該選擇器的使用可以準確找到需要設置樣式的元素。最終實現效果如下圖所示：

2、[attr=value]選擇器

以第一種選擇器相比較除屬性名稱之外還需要滿足取值等于value。如我們需要將上例中id值為2的DIV進行樣式設置，則可直接編寫選擇器：

[attr="2"]{background-color:red;}

通過value值對attr屬性進行篩選，最終找到符合條件的DIV實現背景顏色變化。測試效果如下：

3、[attr~=value]選擇器

該選擇器可以選擇對應屬性attr的值為列表形式，且值列表中包含value值。如我們在定義樣式中對于多個類選擇器的使用一般寫法如下：

<div class="cl1 cl2 cl3" id="4">4</div>

上述代碼即符合多個屬性值，中間空格隔開，因此我們可以編寫選擇器實現對這個DIV的選擇。實現代碼如下：

[class~="cl2"]{font-size: 36px;color:white; background-color: blue;}

我們選中該DIV實現樣式設置，最終呈現效果如下：

4、[attr|=value]選擇器

該選擇器主要對attr屬性取值為value或者以value-為前綴的元素進行選擇。我們將第五個DIV代碼進行修改描述如下：

<div class="pure-g pure-from">5</div>

如果要選擇這個DIV我們可以編寫以下選擇器，代碼如下：

[class|="pure"]{font-size: 36px;color:white; background-color: gray;}

通過以上選擇器及樣式編寫，可將第五個DIV樣式進行修改，顯示結果如下：

5、[attr^=value]選擇器

該選擇器基本與|value選擇器類似，只是要求取值為value開頭的值。我們修改第六個DIV的代碼如下：

<div id="mytest">6</div>

通過編寫選擇器，在value中包含my進行測試，選擇器代碼如下：

[id^="my"]{font-size: 36px;color:white; background-color: yellow;}

代碼中我們修改了背景顏色為黃色，測試結果如下所示：

6、[attr*=value]選擇器

該選擇器要求屬性attr對應的屬性值中包含value，如果包含則選中該元素。我們將第二個DIV進行代碼編寫，如下：

<div class="val1 val2 val3">2</div>

我們定義如下選擇器：

[class*="val1"]{background-color:magenta;}

通過以上選擇器我們可以選中第二個DIV，并實現樣式設置，我們將背景顏色改為magenta。實現效果如下：

7、[attr$=value]選擇器

該方法用于選擇attr屬性值中以value結尾的元素。我們將第三個DIV代碼進行修改，如下：

<div id="mylast">3</div>

編寫選擇器代碼如下：

[id$="last"]{background-color:steelblue;}

通過該選擇器可以選擇第三個DIV并對其背景顏色進行設置，測試結果如下：

以上給出了常用的基本屬性選擇器與屬性選擇器的說明及實例分析。下篇文章我們將對關系選擇器進行說明。

本頭條號長期關注編程資訊分享；編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見，可在評論區回復。更多程序設計相關教程及實例分享，期待大家關注與閱讀！相關文章鏈接如下：

Web前端設計-JavaScript動態設置CSS樣式實例分析

前端設計-JavaScript實現復選框的分組單選

文：https://www.smashingmagazine.com/2018/10/attribute-selectors-splicing-html-dna-css/

如題。但是不要擔心，雖然屬性選擇器非常復雜和強大，但是它們很容易學習和使用。在本文中，我們將討論它們是如何運行的，并給出一些如何使用它們的想法。

通常將 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;
}

喜歡小編的可以點個贊關注小編哦，小編每天都會給大家分享文章。

我自己是一名從事了多年的前端老程序員，小編為大家準備了新出的前端編程學習資料，免費分享給大家！

如果你也想學習前端，那么幫忙轉發一下然后再關注小編后私信【1】可以得到我整理的這些前端資料了（私信方法：點擊我頭像進我主頁有個上面有個私信按鈕）