CSS3如何使用屬性選擇器完成JavaScript的工作

這篇文章主要介紹了CSS3如何使用屬性選擇器完成JavaScript的工作，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

CSS3除了引入動(dòng)畫(huà)、濾鏡（用于特效）以及新的布局技術(shù)外，在選擇器（selector）方面也有增強(qiáng)。在以前只能用JavaScript來(lái)完成的工作，通過(guò)CSS的這些技術(shù)也可以來(lái)完成。

屬性選擇器根據(jù)元素的屬性（attributes）來(lái)匹配。這可以是一個(gè)單獨(dú)的屬性，比如[type]，或者可以是一個(gè)屬性和取值的組合，比如[type=checkbox] 或 [for="email"]。

我們也可以用屬性選擇器來(lái)匹配屬性存在與否以及子字符串。例如，我們可以在空格分隔開(kāi)的列表中匹配屬性值，或者我們可以匹配以字符串tel:開(kāi)始的屬性值。我們甚至可以匹配帶連字符的屬性值如en-US。其中連字符匹配和空格分隔屬性值列表匹配早在CSS2中已有定義。

CSS3的增強(qiáng)在于添加了部分（partial）匹配規(guī)則。本篇將著重介紹新引入的屬性選擇器（Attribute selectors）使用方法。

1.部分匹配

使用全屬性值來(lái)匹配是很常用的方法，不過(guò)在CSS3中我們可以使用部分匹配，語(yǔ)法格式是：

[att~=val]

這里att代表屬性，val代表空格分隔開(kāi)來(lái)的屬性值列表中的某一個(gè)值。波浪線~表示部分匹配的語(yǔ)義。

比如：

<a href="http://www.ikinsoft.com/" class="html5 friends">ikinsoft</a>

2.子字符串匹配

我們還可以通過(guò)子字符串來(lái)匹配屬性值，有點(diǎn)類似于正則表達(dá)式：

^= ： 從頭部匹配

$= ： 從尾部匹配

*= ： 包含某子字符串

比如下面的html代碼：

<a href="tel:+13800138000">Call ikinsoft online support</a>

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