您现在的位置:首页 >> 前端 >> 内容

CSS中强大的属性选择器介绍

时间:2017/12/22 10:21:58 点击:

  核心提示:在css中有一个不太常用却非常强大的元素选择器,属性选择器,相信在开发中用过它的小伙伴一定会体验其优越之处。下面我们将详细介绍它的用法和有点。注意,只有在规定了 !DOCTYPE 时,IE7 和 IE...

在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代码。

Tags:CS SS S中 中强 
作者:网络 来源:wangzai_dr