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

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

CSS3除了引入動畫、濾鏡（用于特效）以及新的布局技術外，在選擇器（selector）方面也有增強。在以前只能用JavaScript來完成的工作，通過CSS的這些技術也可以來完成。

屬性選擇器根據元素的屬性（attributes）來匹配。這可以是一個單獨的屬性，比如[type]，或者可以是一個屬性和取值的組合，比如[type=checkbox] 或 [for="email"]。

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

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

1.部分匹配

使用全屬性值來匹配是很常用的方法，不過在CSS3中我們可以使用部分匹配，語法格式是：

[att~=val]

這里att代表屬性，val代表空格分隔開來的屬性值列表中的某一個值。波浪線~表示部分匹配的語義。

比如：

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

2.子字符串匹配

我們還可以通過子字符串來匹配屬性值，有點類似于正則表達式：

^= ： 從頭部匹配

$= ： 從尾部匹配

*= ： 包含某子字符串

比如下面的html代碼：

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

感謝你能夠認真閱讀完這篇文章，希望小編分享的“CSS3如何使用屬性選擇器完成JavaScript的工作”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!