简述css属性选择器的几种定义方式_简述CSS属性选择器

在css中，属性选择器有很多种，比如ID选择器，类选择器等等。今天，小编将向广大初学者带来一篇属性选择器的简介，希望以一些简单的例子令大家更容易认识属性选择器。

一.什么是属性选择器

属性选择器就是指，利用html的属性标签作为选择器，其作用是对带有指定属性的HTML元素设置样式。

属性选择器可以为拥有指定属性的HTML元素设置样式，而不仅限于class和id属性。

温馨提示：如果使用的是IE浏览器，在IE6或更低版本是不支持属性选择的。IE7也只有在规定了!DOCTYPE时，才支持属性选择器的使用。

二、属性选择器的语法

属性选择器用[]显示，下面的例子为带有title属性的所有元素设置样式：

[title]

{

color:red;

}

三.带有属性值选择器和属性选择器的区别

下面的例子为title="W3School"的所有元素设置样式：

[title=W3School]

{

border: 5px solid blue;

}

这里需要注意的是[title]和[title=W3School]的区别。

如下述代码

运行代码，标红代码应用上面设置的样式，而标蓝代码则不应用。这是因为我们只对[title=W3School]作了定义，而没有对[title]进行定义。

四、属性值的相关问题

当选择器的属性值不止一个时，我们可根据属性值之间不同的连接方式选择不同的选择器来进行设置。

1.使用空格进行分隔

如果属性值是用空格进行分隔的，这种情况我们可以使用[attribute~=value]来进行设置，下面的例子就是为包含指定值的title属性的所有元素设置样式。

运行代码，我们发现红色代码应用样式。这是因为它的title含有hello属性值，并且与其他属性值用空格分隔。而蓝色代码则没有包含hello这个属性值，所以其不应用样式。

2.用连字符“-”进行分隔

如果属性值是用连字符“-”进行分隔的，我们则使用[attribute|=value]来进行设置。

举例如下：

同理，运行代码后，红色代码应用样式，而蓝色代码不应用。

此外，根据属性值出现的位置和分隔符号的不同，用法也有不同，鉴于篇幅所限，其他用法就不一一详细介绍了，具体用法汇总如下：

五、属性选择器的优势体现

在为不带有class或id的表单设置样式时，使用属性选择器，则充分体现其优势。

如下面的代码，方便简洁

虽然属性选择器的使用没有类选择器的多,但它在文本框的设置上具有其他选择器无法取代的优势.通过本本文的学习,我们可以清楚了解到属性选择器的用法及优势,为了将来能更合理地使用选择器打下坚实的基础。