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

Question

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

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

Answer 1

[class^="test"]

上面选择了以 "test" 类开头的所有元素,如果测试是第二类,它将无法找到.

但:

[class|="test"]

查找匹配类的元素,如果该类是"测试",则不会显示该类,但是如果该类是"测试",则上述元素将匹配两者.此外,它将无法找到测试是否是第二类.

[class|="test-"]

并且这种情况只接受"test-"并且不接受"test-ing"或以"test-"开头的字符串,例如"test-ing".