[CSS3]移動Web開發系列之CSS3加強型選擇器

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

、圓角邊框

接下來咱們主要解說加強型的選擇器。主要分兩種，屬性選擇器和僞類選擇器

一、屬性選擇器

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>

二、僞類選擇器

CSS3選擇器中，僞類選擇器種類許多，在CSS2.1時代。僞類選擇已經存在。好比超連接的四個狀態選擇器

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

CSS3添加了許多的選擇器，當中包含：

first-line 僞元素選擇器

first-letter僞元素選擇器

root選擇器

not選擇器

empty選擇器

target選擇器