属性选择器和类选择器，谁的权重要更高？

在 CSS 中选择器权重规则下，属性选择器 [attribute=value] 和类选择器 .class 具有完全相同的权重。这意味着当它们用于同一元素的样式声明时，其优先级是平等的，权重计算值通常为 10（参考四部分的通用权重模型：0010）。详细原因如下：

• 在选择器的权重体系（Specificity）中：
  • 权重采用四部分模型：inline-style > ID-selectors > class/attribute/pseudo-class-selectors > element/pseudo-element-selectors。
  • 其中，类选择器 .class 和属性选择器 [attr=value] 均归属于第三级别（即 c 类型），权重贡献相同（值为 10）。
• 对比逻辑：
  1. 当两个选择器孤立使用时（例如 .example vs [type=text]），它们的权重等值。
  2. 当在复合选择器中共同出现时（例如 .example[data-role=button]），权重会根据组合累加（如 0020）。其他级别（如 ID 或 inline 样式）差异会影响最终优先级更高。
  3. 当优先级完全相同后，才遵循就近原则或位置顺序确定应用样式。

提示：在实际项目中，避免权重冲突的常见做法包括使用 BEM 命名约定或简化选择器链。