如何用CSS3屬性選擇器取代JS的作用

我們知道，在CSS3中除了引入動畫和濾鏡等特效還有新的佈局技術以外還有在選擇器的方面也有增強，以前在JS才能完成的工作現在通過CSS的技術也可以實現完成，接下來就來跟大家介紹一下強大的CSS3

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

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

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

1.部分匹配

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

[att ~=val]

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

例如：

ikinsoft

2.子字串匹配

我們也可以透過子字串來匹配屬性值，有點類似正規表示式：

^= ： 從頭部匹配

$= ： 從尾部匹配

*= ： 包含某子字串

例如下面的html程式碼：

Call ikinsoft online support

##相信看了這些案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

相關閱讀：

CSS3關於translate屬性的詳細介紹

#CSS3實作旋轉光環效果的實作步驟

CSS3做出圓形風格麵包屑程式碼實作步驟
#

以上是如何用CSS3屬性選擇器取代JS的作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！