CSS 属性选择器可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
注释:只有在规定了 !DOCTYPE 时,IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中,不支持属性选择。
css属性选择器有哪些?
1、[attribute]
:用于选取带有指定属性的元素。
1)、用于选取带有指定属性的元素
/**选择了.demo下所有带有id属性的a元素 **/ .demo a[id] { }
2)、也可以使用多属性进行选择元素。
/**选择了.demo下同时拥有href和title属性的a元素 **/ .demo a[href][title] { }
2、[attribute=value]
:用于选取带有指定属性和值的元素。
当前也可以多个属性一起使用:
/**选择了.demo下id="first"的a元素 **/ .demo a[id="first"] { } /**选择了.demo下id="first",且拥有title属性的a元素 **/ .demo a[id="first"][title] { }
注意:[attribute=value]
这种属性选择器,属性和属性值必须完全匹配,特别是对于属性值是词列表的形式时。
/** 匹配不到元素 **/ a[class="links"] { } /** 这个才能匹配到 **/ a[class="links item"] { } <a href="" class="links item">hangge.com</a>
3、[attribute~=value]
:用于选取属性值中包含指定词汇的元素。
同上面的完全匹配不同,这个只要属性值中有 value 就相匹配。
/** 可以匹配到元素 **/ a[class~="links"] { } <a href="" class="links item">hangge.com</a>
4、[attribute|=value]
:用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
这个选择器会选择 attr 属性值等于 value 或以 value- 开头的所有元素。
/** 下面3个img都会被匹配到 **/ img[src|="figure"] { } <img src="figure-0.webp" alt="图1"> <img src="figure-1.webp" alt="图1"> <img src="figure-2.webp" alt="图1">
5、[attribute^=value]
:匹配属性值以指定值开头的每个元素。
/** href属性值以"mailto:"开头的所有a元素 **/ a[href^="mailto:"] { }
6、[attribute$=value]
:匹配属性值以指定值结尾的每个元素。
/** href属性值以"png"结尾的所有a元素 **/ a[href$="png"] { }
7、[attribute*=value]
:匹配属性值中包含指定值的每个元素。
/** title属性值中只要包含有"site"的所有a元素 **/ a[title*="site"] { }
更多web前端开发知识,请查阅 HTML中文网 !!
以上就是css属性选择器有什么用?的详细内容,更多请关注易知道|edz.cc其它相关文章!