选择器
选择器是CSS3中一个重要的部分通过使用CSS的选择器，可以提高开发人员的开发效率。
1、属性选择器
在CSS3中，可以使用HTML元素的属性名称选择性的定义CSS样式。其主要目的是为带有指定属性的HTML元素设置CSS样式。例如通过指定div的id属性，设定相关属性。
在CSS3中属性选择器一共分为以下4中匹配模式选择器：
- 完全匹配属性选择器
- 包含匹配选择器
- 首字符匹配选择器
- 尾字符匹配选择器
1.1.1、完全匹配属性选择器
其含义就是完全匹配字符串。当div 元素的id 属性值为wpf_css3时，利用完全匹配选择器选择任何id 值为wpf_css3 的元素都使用该样式。如下代码通过指定id 值将属性设定为红色字体：
<style type="text/css">
[id=wpf_css3]{
color:red;
}
</style>
<div id="wpf_css3">完全匹配属性选择器</div>
1.1.2、包含匹配选择器
包含匹配比完全匹配范围更广。只要元素中的属性包含有指定的字符串，元素就使用该样式。其语法是：[attribute*=value]。其中attribute 指的是属性名，value 指的是属性值，包含匹配采用“*=”符号。
例如以下三个div元素都符合匹配选择器的选择。
<div id="wpf_css1">完全匹配属性选择器，id是wpf_css1</div>
<div id="css1wpfcss">完全匹配属性选择器,id是css1wpfcss</div>
<div id="wpf">完全匹配属性选择器,id是wpf</div>
<style type="text/css">
[id*=wpf]{
color:red;
}
</style>
这三个div中的id属性中只要有字符串wpf则就满足匹配选择器。完了之后执行代码，你会发现三个div中字符显示的都是红色。
1.1.3、首字符匹配选择器和尾字符匹配选择器
首字符匹配就是匹配属性值开头字符，只要开头字符符合匹配，则元素使用该样式。而尾字符匹配选择器只要结尾字符串符合匹配，则元素使用该样式。
首字符匹配选择器语法：[attribute^=value]。其中attribute 指的是属性名，value 指的是属性值，首字符匹配使用“^=”符号。
尾字符匹配选择器语法：[attribute$=value]。其中attribute 指的是属性名，value 指的是属性值，尾字符匹配使用“$=”符号。
例子：
（1）、首字符匹配选择器
<div id="wpf_css">完全匹配属性选择器，id是wpf_css</div>
<div id="css1wpfcss">完全匹配属性选择器,id是css1wpfcss</div>
<div id="wpf">完全匹配属性选择器,id是wpf</div>
<style type="text/css">
[id^=wpf]{
color:red;
}
</style>
执行代码你会发现只有id为wpf_css和id为wpf的div元素中的内容显示为红色。
（2）、尾字符匹配选择器
<div id="wpf_css">完全匹配属性选择器，id是wpf_css1</div>
<div id="css1wpfcss">完全匹配属性选择器,id是css1wpfcss</div>
<div id="wpf">完全匹配属性选择器,id是wpf</div>
<style type="text/css">
[id$=css]{
color:red;
}
</style>
执行代码你会发现，只有id以css结尾的div元素的内容才被显示为红色。