CSS3选择器详解

在CSS3中，我们可以使用html元素的属性名称先择性地定义CSS样式，其实属性选择器早在CSS2中就被引入了，属性选择器一共分为4中匹配模式选择器

1.完全匹配属性选择器

2.包含匹配选择器

3.首字母匹配选择器

4.尾字符匹配选择器

下面就开始讲解这4中选择器的具体用法：

1.完全匹配属性选择器：

其含义就是完全匹配字符串 当一个元素的属性和属性值与样式所指定的属性和属性值完全相同时，才会使用该样式，并且适用所有被匹配的元素

eg:  <div id="style1">完全匹配属性选择器</div>

<style type="text/css">

[id="style1"]{boder-color:red;}

</style>

2.包含匹配选择器：

包含匹配选择器比完全匹配要广，只要元素中的属性值包含有指定的字符串，元素就会使用该样式

其语法是：[attribute*=value] 其中attribute是属性名，value是属性值

eg: <div id="style1">包含匹配选择器1</div>

<div id="style2">包含匹配选择器2</div>

<div id="style3">包含匹配选择器3</div>

<style type="text/css">

[id*="style"]{boder-color:red;}

</style>

以上3个div都会使用该元素

3.首字符匹配选择器

首字符匹配选择器是指只要元素的属性值的开头有指定的字符串，元素就会使用该样式

其语法是：[attribute^=value]

<div id="style1">首字符匹配选择器1</div>

<div id="style2">首字符匹配选择器2</div>

<div id="mystyle">首字符匹配选择器3</div>

<style type="text/css">

[id*="style"]{boder-color:red;}

</style>

只有属性值为style1和style2的div会使用该样式

4.尾字符匹配选择器

和首字符选择器一样 只要元素的属性值的尾字符符合匹配，元素就会使用该样式

其语法是：[attribute$=value]

<div id="style">尾字符匹配选择器1</div>

<div id="style1">尾字符匹配选择器2</div>

<div id="mystyle">尾字符匹配选择器3</div>

<style type="text/css">

[id*="style"]{boder-color:red;}

</style>

只有id为style的div会使用该样式

-------------------------------------------------------------------------------------------------------------伪类选择器----------------------------------------------------------------------------------------------------------

在CSS3选择器中，伪类选择器种类非常多。然后再CSS2.1时代，伪类选择器就已经存在，例如超链接的四个状态选择器： a:link a:visited a:hover a:active 

CSS3中增加了非常多的选择器，其中包括:

first-line 伪元素选择器

first-letter 伪元素选择器

root 选择器

not选择器

empty选择器

target选择器

这些伪类选择器是CSS3新增的选择器，他们都能得到在Andoird和IOS平台下Web浏览器的支持，现在着重讲解这部分选择器

1.before

before伪类元素选择器主要的作用是在某个元素前插入内容，一般用于清除浮动

其语法是：

元素标签:before{

content："插入的内容"

}

eg:在p标签前插入"文字":   p.before{ content : ”文字"}

2.after

after和before原理一样，在某个标签后插入内容

3.first-child

指定元素列表中第一个元素的样式 

其语法是：

li:first-child{

color:red

}

4.last-child

和first-child原理一样，指定元素列表的最后一个元素的样式

5.nth-child和nth-last-child

可以指定某个元素的样式或从后数起某个元素的样式

eg： li:nth-child(2){}  //指定第二个li元素

  li:nth-last-child(2){} //指定倒数第二个li元素

  li:nth-child(even){}  //指定偶数个li元素

  li:nth-child(odd){}   //指定奇数个li元素

这只是部分常用的CSS选择器,并不止这几种，其余的选择器不再详细介绍,有兴趣的朋友和阅读CSS3相关资料