两个css选择器[class^=test] vs [class|=test]有什么区别[重复]

Question

这两个[class^=test] 和[class|=test] 匹配我看到的相同元素。

有什么真正的区别或案例为什么我应该使用一个而不是另一个？

Answer 1

[class^="test"]

上面选择了所有以class开头“test”的元素，如果test是第二类，会找不到。

但是：

[class|="test"]

查找与类匹配的元素，如果该类正在“测试”，则不会显示您 但会发现如果该类是“测试”，上面的一个将匹配两者。另外，如果测试是二等，它将无法找到。

[class|="test-"]

并且这种情况只接受“test-”，不接受“test-ing”或以“test-”开头的字符串，例如“test-ing”。