Css3选择器-属性选择器
2014-12-28 22:51
447 查看
一、E[attr]
E[attr]属性选择器是CSS3属性选择器中最简单的一种。如果你希望选择有某个属性的元素,而不论这个属性值是什么,你就可以使用这个属性选择器IE6不支持这个选择器。
二、E[attr="value"]
E[attr="value"]选择器和E[attr]选择器,从字面上就能很清楚的理解出来,E[attr="value"]是指定了属性值“value”,而E[attr]只是选择了有对应的属性,并没有明确指其对应的属性值"value",这也是这两种选择器的最大区是之处。从而缩小了选择 围,更能精确选择自己需要的元素IE6浏览器不支持这种选择器。
三、E[attr~="value"]
如果你想根据属性值中的词列表的某个词来进行选择元素,那么就需要使用这种属性选择器:E[attr~="value"],这种属性选择器是属性值是一个或多个词列表,如果是列表时,他们需要用空格隔开,只要属性值中有一个value相匹配就可以选中该元素,而我们前面所讲的E[attr="value"]是属性值需要完全匹配才会被选中,他们两者区别就是一个有“〜”号,一个没有“〜”号。IE6不支持E[attr~="value"]属性选择器。
四、E[attr^="value"]
E[attr^="value"]属性选择器,指的是选择attr属性值以“value”开头的所有元素,换句话说,选择的属性其以对应的属性值是以“value”开始的IE6不支持E[attr^="value"]选择器。
五、E[attr$="value"]
E[attr$="value"]属性选择器刚好与E[attr^="value"]选择器相反,E[attr$="value"]表示的是选择attr属性值以"value"结尾的所有元素,换句话说就是选择元素attr属性,并且他的属性值是以value结尾的,这个运用在给你一些特殊的链接加背景图片很方便的,比如说给pdf,png,doc等不同文件加上不同icon,我们就可以使用这个属性来实现IE6不支持E[attr$="value"]属性选择器。
六、E[attr*="value"]
E[attr*="value"]属性选择器表示的是选择attr属性值中包含子串"value"的所有元素。也就是说,只要你所选择的属性,其属性值中有这个"value"值都将被选中IE6不支持E[attr$="value"]属性选择器。
七、E[attr|="value"]
E[attr|="value"]是属性选择器中的最后一种,在说这个选择器使用之前先提醒大家attr后面的是一个竖线“|”而不是l,小心搞错了。E[attr|="value"]被称作为特定属性选择器。这个选择器会选择attr属性值等于value或以value-开头的所有元素IE6不支持E[attr|="value"]选择器。
相关文章推荐
- CSS3 选择器 属性选择器介绍
- Css3之高级-1 Css复杂选择器(兄弟选择器 、属性选择器、伪类选择器、伪元素选择器)
- CSS3 选择器——属性选择器
- CSS3 选择器——属性选择器
- CSS3选择器——属性选择器
- CSS3 选择器——属性选择器
- CSS3之选择器1(属性选择器,结构伪类)
- CSS3 选择器——属性选择器
- CSS3 选择器——属性选择器
- [教程] CSS3 选择器——属性选择器(一)
- css3 - 属性选择器、伪元素选择器、结构性伪类选择器
- CSS3属性选择器与(:not)选择器
- CSS3选择器--属性选择器
- CSS3 选择器——属性选择器
- CSS3 选择器——属性选择器
- CSS3选择器(二)之属性选择器
- CSS3的新增选择器示例-属性选择器
- CSS3 选择器——属性选择器
- CSS3选择器之属性选择器
- 第91天:CSS3 属性选择器、伪类选择器和伪元素选择器