html目标选择器有什么用,css属性选择器有什么用？

CSS 2 引入了属性选择器，属性选择器可以根据元素的属性及属性值来选择元素。下面给大家介绍一下CSS 属性选择器，有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

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"] {

}

hangge.com

3、[attribute~=value]：用于选取属性值中包含指定词汇的元素。

同上面的完全匹配不同，这个只要属性值中有 value 就相匹配。/** 可以匹配到元素 **/

a[class~="links"] {

}

hangge.com

4、[attribute|=value]：用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。

这个选择器会选择 attr 属性值等于 value 或以 value- 开头的所有元素。/** 下面3个img都会被匹配到 **/

img[src|="figure"] {

}

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中文网 ！！