请问class与[class=xxx]的区别是什么？两者是否等价？

在前端开发中，class 和 [class=xxx] 在选择器中使用时，并不完全等价。它们的主要区别在于如何处理元素上可能存在的多个类名。

• class 选择器: 匹配任何包含指定类名的元素，无论该元素是否还有其他类名。

  <div class="a b"></div>
  <div class="a"></div>
  <div class="b"></div>
  
  .a { color: red; }
  

  在这个例子中，.a 选择器会匹配到前两个 div 元素，因为它们都包含类名 "a"，即使第一个 div 还有另一个类名 "b"。

• [class=xxx] 属性选择器: 精确匹配 class 属性值完全等于 "xxx" 的元素。如果元素的 class 属性包含其他类名，则不会匹配。

  <div class="a b"></div>
  <div class="a"></div>
  <div class="b"></div>
  
  [class="a"] { color: red; }
  

  在这个例子中，[class="a"] 选择器只会匹配到第二个 div 元素，因为它的 class 属性值恰好是 "a"。第一个 div 虽然包含 "a"，但由于还有 "b"，所以不匹配。第三个 div 也不匹配，因为它不包含 "a"。

总结:

选择器	匹配条件
.a	元素的 class 属性包含 "a"
[class="a"]	元素的 class 属性值完全等于 "a"

实际应用场景:

• 大多数情况下，使用 .a 这样的类选择器就足够了，因为它更灵活，可以匹配包含指定类名的所有元素。
• 当需要精确匹配特定 class 属性值的元素，并且排除具有其他类名的元素时，才需要使用 [class="a"] 这样的属性选择器。 例如，你可能希望只对 class 属性值恰好是 "a" 的元素应用样式，而不对同时拥有 "a" 和 "b" 的元素应用样式。

更进一步：

除了 [class="xxx"]，还有其他一些属性选择器可以用于更复杂的匹配：

• [class~=xxx]：匹配 class 属性值包含以空格分隔的 "xxx" 的元素。 这与 .xxx 选择器功能相同。
• [class*=xxx]：匹配 class 属性值包含子字符串 "xxx" 的元素。
• [class^=xxx]：匹配 class 属性值以 "xxx" 开头的元素。
• [class$=xxx]：匹配 class 属性值以 "xxx" 结尾的元素。

希望这个解释能够帮助你理解 class 和 [class=xxx] 的区别。