css中正则匹配相似id与类名

在wordpress官方主题中看到过类似用中括号包裹属性名的写法，用来正则匹配命名类似的一批元素，比如有一批p元素采用“comment-1,comment-2,comment-3...”这样的类名，如果想要为这一类元素设置统一的属性，我们可以通过下面的方式选中它们：

p[class ^= "comment"]{
    color:red;
}

“^=”这个符号，可以理解成所有以“comment”这一串字符开头的字符串都包括在内。所以无论后面是几号，都会被认为符合这个规则。

三种匹配方式

• [class^="test"]：头部匹配；
• [class$="test"]：尾部匹配；
• [class*="test"]：任意位置匹配。

p[class ^= "test"]

头部匹配：在上面的例子中，所有以“test”开头的类名都包括在内，比如“test-1”、“tester”；

p[class $= "test"]

尾部匹配：在上面的例子中，所有以“test”开头的类名都包括在内，比如“1-test”、“newtest”；

p[class *= "test"]

任意位置匹配：后匹配：在上面的例子中，p元素的类名中只要包含有“test”这样的字符就会被选中，比如“newtester”、“1-test-1”，这类匹配的范围最广，当然也更容易引起属性上的冲突。

一些使用实例

p[class='test']

____匹配所有带有class类名为test的p标签；

div[class ^= "test"]

____匹配所有类名以test开头的div标签；

span[class *='test']

____匹配所有类名包含test字符串的span标签；

a[class]

____匹配所有带有class属性的a标签；

[class='all']

____匹配页面上所有带有class='all'的标签，这种选择是跨标签的；

[class *='as']

____匹配页面上所有class类且类名带有as字符串的类的标签。