属性选择器 在CSS3中,我们可以使用HTML元素的属性名称选择性地定义CSS样式。其实,属性选择器早在CSS2中就被引入了,其主要作用就是为带有指定属性的HTML 元素设置样式。例如,通过指定div元素的id属性,设定相关样式。 属性选择器一共分为4种匹配模式选择器: 完全匹配属性选择器 包含匹配选择器 首字符匹配选择器 尾字符匹配选择器 1.完全匹配属性选择器 其含义就是完全匹配字符串。当div元素的id属性值为test时,利用完全匹配选择器选择任何id值为test的元素都使用该样式。如下代码通过指定id值将属性设定为红色字体: <div id="article">测试完全匹配属性选择器</div> <style type="text/css"> [id=article]{ color:red; } </style> 2.包含匹配选择器 包含匹配比完全匹配范围更广。只要元素中的属性包含有指定的字符串,元素就使用该样式。 其语法是:[attribute*=value]。其中attribute指的是属性名,value指的是属性值,包含匹配采用“*=”符号。 例如下面三个div元素都符合匹配选择器的选择,并将div元素内的字体设置为红色字体: <div id="article">测试完全匹配属性选择器</div> <div id="subarticle">测试完全匹配属性选择器</div> <div id="article1">测试完全匹配属性选择器</div> <style type="text/css"> [id*=article]{ color:red; } </style> 3.首字符匹配选择器 首字符匹配就是匹配属性值开头字符,只要开头字符符合匹配,则元素使用该样式。 其语法是:[attribute^=value]。其中attribute指的是属性名,value指的是属性值,首字符匹配采用“^=”符号。 例如下面三个div元素使用首字符匹配选择器后,只有id为article和article1的元素才被设置为红色字体。 <div id="article">测试完全匹配属性选择器</div> <div id="subarticle">测试完全匹配属性选择器</div> <div id="article1">测试完全匹配属性选择器</div> <style type="text/css"> [id^=article]{ color:red; } </style> 4.尾字符匹配选择器 尾字符匹配跟首字符匹配原理一样。尾字符只匹配结尾的字符串,只要结尾字符串符合匹配,则元素使用该样式。 其语法是:[attribute$=value]。其中attribute指的是属性名,value指的是属性值,尾字符匹配采用“$=”符号。 例如下面三个div元素使用尾字符匹配选择器时,只有id为subarticle的元素才被设置为红色字体。 <div id="article">测试完全匹配属性选择器</div> <div id="subarticle">测试完全匹配属性选择器</div> <div id="article1">测试完全匹配属性选择器</div> <style type="text/css"> [id$=article]{ color:red; } </style>