Class 中属性的 SCSS 覆盖值

Question

我有这个html

<div class="v-menu__content" style="left: 559px;"></div>

<div class="v-menu__content" style="left: 12px;"></div>

<div class="v-menu__content" style="left: 1109px;"></div>

在 scss 中有什么方法可以只覆盖 class v-menu__content 与 left: 12px 并将 12px 更改为 0.5rem !important

这些 html 是由 veutify 在后台自动生成的，所以我无法控制它

Answer 1

如果 .v-menu__content 元素在同一父元素中，您可以使用 :nth-of-type 选择器。

.v-menu__content:nth-of-type(2){
  left: 0.5rem !important;
}

Answer 2

你可以使用属性选择器，虽然技术上不是它的用途，但它可以解决你在这个例子中的问题。给你：.v-menu__content[style*="left: 12px;"] {do your magic}

.v-menu__content[style*="left: 12px;"] {
  color: red;
  left: 0.5rem !important;
}

<div class="v-menu__content" style="left: 559px;">test</div>
<div class="v-menu__content" style="left: 12px;">test</div>
<div class="v-menu__content" style="left: 1109px;">test</div>

Class 中属性的 SCSS 覆盖值

SCSS Override Value of Property from Class

css

sass

vuetify.js

Class 中 属性 的 SCSS 覆盖值

SCSS Override Value of Property from Class

css

sass

vuetify.js

Class 中属性的 SCSS 覆盖值