Css3 选择器

一、选择器

　　选择器是CSS3中一个重要的部分通过使用CSS的选择器，可以提高开发人员的开发效率。

1、属性选择器

　　在CSS3中，可以使用HTML元素的属性名称选择性的定义CSS样式。其主要目的是为带有指定属性的HTML元素设置CSS样式。例如通过指定div的id属性，设定相关属性。

　　在CSS3中属性选择器一共分为以下4中匹配模式选择器：

1. 完全匹配属性选择器
2. 包含匹配选择器
3. 首字符匹配选择器
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元素的内容才被显示为红色。