Question

假设我有一个带有2个v-text-field组件的Test.vue。

我只想将CSS应用于第一个文本字段。

Test.vue

<template>
  <div class="test">
    <v-text-field></v-text-field>
    <v-text-field></v-text-field>
  </div>
</template>

<script>
export default {};
</script>


<style scoped>
.v-text-field {
  width: 100px;
}

.v-text-field >>> input {
  font-size: 2em;
  color: #fff;
}

.v-text-field--outlined >>> fieldset {
  color: #000000 !important;
}
</style>>

Answer 1

如何使用第一个子CSS选择器

<style scoped>
.test:first-child {
  width: 100px;
}

.test:first-child >>> input {
  font-size: 2em;
  color: #fff;
}

.test:first-child .v-text-field--outlined >>> fieldset {
  color: #000000 !important;
}
</style>

Answer 2

有很多方法可以做到这一点，但是我认为最好给您特定的文本字段一个id并对其进行引用。

<div class="test">
    <v-text-field id="my-text-field"></v-text-field>
    <v-text-field></v-text-field>
</div>

#my-text-field {
    //your styling
}

Vuetify JS-将CSS应用于特定组件

2 个答案: