CSS3屬性選擇器簡單介紹

admin發表於2017-02-11
CSSS3
雖然當前CSS3還存在瀏覽器相容性問題，不過隨著時間的推移，低版本瀏覽器特別是IE瀏覽器被淘汰以後，CSS3必將因為其強大的功能成為主流，CSS3新增了很多選擇器，下面簡單介紹一下屬性選擇器的簡單用法。

一.CSS3屬性選擇器:

1.[attr=val]:匹配具有att屬性且屬性值等於val的E元素。

2.[attr*=val]:匹配具有att屬性且屬性值為包含val的字串的E元素。

3.[attr^=val]:匹配具有att屬性且屬性值為以val開頭的字串的E元素。

4.[attr$=val]:匹配具有att屬性且屬性值為以val結尾的字串的E元素。

二.程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
ul{list-style:none}
li[title="螞蟻部落"]{color:blue;} 
li[title*="您"]{color:red;}
li[title^="hi"]{color:green;}
li[title$="go"]{color:yellow;}
</style>
</head>
<body >
<ul>
  <li title="螞蟻部落">螞蟻部落一</li>
  <li title="螞蟻部落歡迎您">螞蟻部落二</li>
  <li title="hi螞蟻部落">螞蟻部落三</li>
  <li title="螞蟻部落go">螞蟻部落四</li>
</ul>
</body>
</html>

以上程式碼實現了可以通過屬性選擇器匹配不同的元素。

相關閱讀:

1.[attr=val]選擇器可以參閱CSS的屬性選擇符E[att="val"]一章節。

2.[attr*=val]選擇器可以參閱CSS的屬性選擇符E[att*="val"]一章節。 

3.[attr^=val]選擇器可以參閱CSS的屬性選擇符E[att^="val"]一章節。 

4.[attr$=val]選擇器可以參閱CSS的屬性選擇符E[att$="val"]一章節。 

相關文章