Vuetify JS - 将 CSS 应用到特定组件答案

【问题标题】：Vuetify JS - Apply CSS to a specific componentVuetify JS - 将 CSS 应用到特定组件
【发布时间】：2020-10-31 21:40:33
【问题描述】：

假设我有一个带有 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>>

【问题讨论】：

标签： javascript vue.js vuetify.js

【解决方案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>

【讨论】：

好的，但是是给第二个孩子还是第 100 个孩子呢？
:first-child === just the first child :nth-child(n) for nth child

【解决方案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
}

【讨论】：

我试过了，但是我上面提到的样式如何工作？
您不能简单地将.v-text-field 替换为#my-text-field 吗？还是不行？
另请注意，如果您想对任何第 n 个孩子使用 Raeisi 的解决方案。恰好有一个nth child selector
如果你想改变用户在v-text-field中写的文字的文字颜色，只要把它放在一级css中即可。你不需要使用深度选择器>>>
谢谢。第 n 个子解决方案确实有效，但我不喜欢它，因为在文本字段上方添加组件时必须调整 n。