[分享]css中class正则匹配

CSS中的class是选择器的其中一种，可以通过class来选择HTML元素并对其应用样式。正则表达式是一种强大的字符串匹配工具，在CSS中可以使用正则表达式来对class进行匹配。/ 匹配所有cla...

CSS中的class是选择器的其中一种，可以通过class来选择HTML元素并对其应用样式。正则表达式是一种强大的字符串匹配工具，在CSS中可以使用正则表达式来对class进行匹配。

/* 匹配所有class以btn开头的元素 */
[class^="btn"] {
  /* 样式 */
} 

上述代码中，[class^="btn"]选择器使用了正则表达式来匹配所有class以btn开头的元素。其中，^表示匹配开头，"btn"是匹配的字符串。这样，所有class以btn开头的元素都会应用该样式。

/* 匹配所有class以btn结尾的元素 */
[class$="btn"] {
  /* 样式 */
} 

类似地，上述代码中的选择器使用了正则表达式来匹配所有class以btn结尾的元素。$表示匹配结尾，"btn"是匹配的字符串。

/* 匹配所有class中包含btn的元素 */
[class*="btn"] {
  /* 样式 */
} 

最后，上述代码中的选择器使用了正则表达式来匹配所有class中包含btn的元素。*表示匹配任意字符，"btn"是匹配的字符串。这样，所有class中包含btn的元素都会应用该样式。

综上所述，使用正则表达式来匹配class是CSS中的一种常见手段，可以帮助我们快速地选中元素并应用样式。