CSS属性模糊匹配


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

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

CSS属性模糊匹配_前端


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

.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;

}

如果用"$="表示选择属性值以指定字符串结尾的元素。
大家可以在日常工作中根据具体的场景选择哈。