[CSS3]移動Web開發系列之CSS3增強型選取器，css3選取器

[CSS3]移動Web開發系列之CSS3增強型選取器，css3選取器

css3是移動Web開發的主要技術之一。當前，CSS3技術最適合在移動Web開發中使用的特性有增強選取器、陰影、強大的背景設定

、圓角邊框

接下來我們主要講解增強型的選取器，主要分兩種，屬性選取器和偽類別選取器

1、屬性選取器

1.1完全符合選取器

文法：[attribute=value]

<span style="font-family:Microsoft YaHei;"><div id="article">屬性匹配選取器</div><style type="text/css">[id=article]{color:red;}</style></span>

1.2包含匹配選取器

文法：[attribute*=value]

<span style="font-family:Microsoft YaHei;"><div id="article">屬性匹配選取器</div><div id="subarticle">屬性匹配選取器</div><div id="article1">屬性匹配選取器</div><style type="text/css">[id*=article]{color:red;}</style></span>

1.3首字元匹配選取器

文法：[attribute^=value]

<span style="font-family:Microsoft YaHei;"><div id="article">屬性匹配選取器</div><div id="subarticle">屬性匹配選取器</div><div id="article1">屬性匹配選取器</div><style type="text/css">[id^=article]{color:red;}</style></span>

1.4尾字元匹配選取器

文法：[attribute$=value]

<span style="font-family:Microsoft YaHei;"><div id="article">屬性匹配選取器</div><div id="subarticle">屬性匹配選取器</div><div id="article1">屬性匹配選取器</div><style type="text/css">[id$=article]{color:red;}</style></span>

2、偽類別選取器

CSS3選取器中，偽類別選取器種類非常多，在CSS2.1時代，偽類選擇已經存在，例如超連結的四個狀態選取器

a:link、a:visited、a:hover、a:active

CSS3增加了非常多的選取器，其中包括：

first-line 虛擬元素選取器

first-letter虛擬元素選取器

root選取器

not選取器

empty選取器

target選取器