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

Question

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

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

测试.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
}