CSS中强大的属性选择器

在css中有一个不太常用却非常强大的元素选择器，属性选择器，相信在开发中用过它的小伙伴一定会体验其优越之处。下面我们将详细介绍它的用法和有点。注意，只有在规定了 !DOCTYPE 时，IE7 和 IE8 才支持属性选择器。在 IE6 及更低的版本中，不支持属性选择。
用法:

[attribute]{}

通过此选择器，小伙伴们即可选择到带有attribute属性的元素，用法非常方便，并且这个属性名可以向class名或ID一样由编程人员自定义，当然，最好是选择一些有语义的属性名，让使用者能够见文知意。那么他的强大之处在哪里呢？
这是由于属性选择器由一个其他选择器不具备的用法，一下一一揭晓：

[attribute=value]
可以选择所有attribute=“value”的元素；
[attribute~=value]
可以选择所有attribute中含有value字段的元素；
[attribute|=value]
可以选择所有attribute的值以value开头的元素；

是不是很方便呢？除此之外，在CSS3中，还对属性选择器进行了一些改进，我们继续来看：

[attribute^=value]
选择attribute值以value开头的所有元素;
[attribute$=value]
选择以attribute值为value结尾的所有元素;
[attribute*=value]
选择attribute值包含value的所有元素.

看到这里，我们发现，通过属性选择器，我们可以利用其多值的特点，达到CSS的继承与扩展，不必在写大量的class，能够节省代码，能更好的维护和优化CSS代码。