不使用!important如何覆盖带属性选择器的.sample样式？

原样式.sample[data-2]的CSS优先级（类选择器+属性选择器）高于单纯的.sample，所以直接写.sample无法覆盖目标样式。不用!important的话，可试试以下几种方案：

方法1：直接匹配所有情况 #

同时指定带data-2属性和不带属性的.sample元素，优先级与原样式持平，只要你的样式在Vuetify之后加载即可生效：

.sample[data-2], .sample {
  color: blue;
}

方法2：提升选择器优先级 #

给.sample添加父级选择器（比如组件根容器类、页面全局类），通过提高权重实现覆盖：
假设你的组件根元素带有class="my-component"，可写：

.my-component .sample {
  color: blue;
}

方法3：Vue组件使用样式穿透（若用scoped样式） #

如果你的样式写在Vue组件的<style scoped>标签内，需要通过样式穿透来覆盖全局的Vuetify样式：

• Vue 2 用/deep/或::v-deep：

/deep/ .sample {
  color: blue;
}

• Vue 3 用:deep()：

:deep(.sample) {
  color: blue;
}

方法4：匹配所有带属性的.sample元素 #

若要覆盖所有带有任意属性的.sample元素，可使用通用属性选择器结合无属性的情况：

.sample[*], .sample {
  color: blue;
}

也可使用:has()伪类（注意需浏览器支持该特性）：

.sample:has([*]), .sample {
  color: blue;
}

内容的提问来源于stack exchange，提问作者Harnsle Lee