CSS属性模糊匹配

简介: 简述CSS属性模糊匹配相关
+关注继续查看

在日常开发中,可能会遇到多个属性名相似但是不完全相同的情况,此时为了给这类属性名给予相同的CSS属性,往往需要用到CSS模糊匹配。

比如想要给所有data-field包含 data-field="TotalMoney"的属性给予相同背景色

image.png

那么可以用到如下模糊匹配

.table thead th[data-field*="TotalMoney"]{
  background-color: #DCE6F1 !important;
}

此处的"*="表示选择属性值中包含指定字符串的元素。

.table thead th[data-field^="TotalMoney"]{
  background-color: #DCE6F1 !important;
}

如果用"^="表示选择属性值以指定字符串开头的元素。

.table thead th[data-field$="TotalMoney"]{
  background-color: #DCE6F1 !important;
}

如果用"$="表示选择属性值以指定字符串结尾的元素。

大家可以在日常工作中根据具体的场景选择哈。

相关文章
|
6天前
|
前端开发 JavaScript UED
使用 CSS 中的form-sizing属性实现文本区域的自动增加高度
使用 CSS 中的form-sizing属性实现文本区域的自动增加高度
14 0
|
7天前
CSS3新增属性之圆角、盒阴影、字阴影
CSS3新增属性之圆角、盒阴影、字阴影
|
22天前
|
前端开发
CSS3 box-shadow 属性
CSS3 box-shadow 属性
18 0
|
28天前
|
前端开发
|
1月前
|
前端开发 容器
css选择器有哪些?优先级?哪些属性可以继承?
css选择器有哪些?优先级?哪些属性可以继承?
29 0
|
1月前
|
前端开发 开发者
css3中有哪些新属性都有什么用处
css3中有哪些新属性都有什么用处
26 0
|
1月前
|
前端开发
css中对 box—sizing 属性的了解
css中对 box—sizing 属性的了解
20 0
|
1月前
|
前端开发
CSS中哪些属性可以继承?
CSS中哪些属性可以继承?
10 0
|
2月前
|
JSON JavaScript 前端开发
jQuery的$工具方法&CSS属性及方法
jQuery的$工具方法&CSS属性及方法
|
2月前
|
JSON JavaScript 前端开发
jQuery$工具方法和CSS的属性经及方法
jQuery$工具方法和CSS的属性经及方法
19 0
相关产品
云迁移中心
推荐文章
更多