在CSS样式表中使用正则表达式

在做网站前端开发的过程中需要不断地对CSS样式进行修改和测试,当遇到特殊的要求时,就考验出前端开发人员的技术功底。例如某弹窗的DIV 类是 class=”col-md-随机变化的一个数字”,这时显然无法在CSS中定义其类样式,许多开发人员异想天开,使用“.col-md-*{样式内容}”来定义,但测试后发现并不能预制匹配,这时可以在CSS中使用类似于正则表达式的方法来进行定义,这种方法利用了属性选择器的语法,使用方括号将属性名和属性值括起来。

在CSS样式表中使用正则表达式
[attribute=value]:匹配属性名为 attribute,属性值等于 value 的元素。
[attribute*=value]:匹配属性名为 attribute,属性值包含 value 的元素。
[attribute^=value]:匹配属性名为 attribute,属性值以 value 开头的元素。
[attribute$=value]:匹配属性名为 attribute,属性值以 value 结尾的元素。
/* 匹配属性名为 data-*,属性值以 "image-" 开头的元素 */
div[data-src^="image-"] {
}
/* 匹配属性名为 data-*,属性值包含 "image-" 或 "video-" 的元素 */
div[data-src*="image-"], div[data-src*="video-"] {
}

需要注意的是,虽然属性选择器可以模拟正则表达式的匹配,但是其匹配的精确度不如正则表达式高,因为属性选择器只能对属性值进行匹配,而无法对元素的内容和结构进行匹配。

未经允许不得转载:西德SEO » 在CSS样式表中使用正则表达式

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏