html - 不需要按部分属性选择？

Question

如果

.animal {background: yellow}

将样式规则应用于任何具有包含单词 animal 的类的元素，即使它还包含其他单词，例如...

<li class="toy animal">Toy Bear</li>

那么通过部分属性选择以下语法需要什么？

*[class~="animal"] {background: yellow}

谢谢

Answer 1

唯一的区别是，您.value只能对类使用语法，何时[attribute~="value"]可以用于匹配任何属性值。

但是当你[class~="className"]用来匹配class属性值时，它就相当于标准.className语法。

Answer 2

根据选择器规范，句点是属性表示法.的替代。~=class

因此，对于 HTML，div.value和div[class~=value]具有相同的含义

只是为了澄清~=含义：

E[foo~="bar"] 一个 E 元素，它的 "foo" 属性值是一个由空格分隔的值的列表，其中一个值正好等于 "bar"

请注意，这不同于*=

换句话说，.animaland [class~=animal]（没有*）是相同的。