css - 在 css 中按 ".class"或 "*[class~=box]"定位类有什么区别？

Question

假设我有一个带有盒子类的 html 元素: <p class="box alert">Content here</p>

最近我了解了一种在 CSS 中定位元素的方法，所以如果我想选择任何带有框类的元素，我可以使用这个: *[class~=box] {border: 2px solid grey;}

我想知道，这与仅通过类名定位元素的字面意思不一样吗？还是我没有正确理解？ .box {border: 2px solid grey;}

如果相同，在哪些情况下使用第二种方法而不是第一种方法比较合适？

Answer 1

属性选择器并不是真正为类设计的，它是为元素中的其他属性设计的，例如 a[href*="google"]，但是是的，您可以设置这样和那样的元素样式肯定会被视为反模式。

虽然 .classname 和 [class~="classname"] 会为相同的元素设置样式，但这些选择器的 CSS 特异性会以不同的方式计算 - 老实说，我' 不完全确定，但 *[class~="classname"] 可以通过 .classname 获胜，而使用这样编写的样式的人应该是知道。