HTML 元素在应用 CSS 时被忽略

Question

我一直在使用 Bootstrap 的 vue form-group 来创建输入字段。 我正在尝试在“图例”元素上为以下代码应用某些 CSS:

<fieldset id="__BVID__59" class="form-group" required="required">
<legend class="col-form-label pt-0">Login</legend>
<div tabindex="-1" role="group">
<input type="text" class="form-control">
<!----><!----><!---->
</div>
</fieldset>

我的目标是为标签添加所需的星号，因此我的建议是:

.form-group[required] legend::after {
  content: '*';
  color: red;
}

但我的 CSS 似乎无法识别图例元素，无论我做什么或如何编写它。 如果我使用标签而不是图例，也是一样的。 我也尝试过使用字段集(父级)的 nth-child(0) 但它似乎只是忽略了这个 child 而没有真正发生。我认为这与我正在使用的 Bootstrap 的 CSS 配置有关，但也使用 !important 似乎没有做任何事情。

如有任何帮助，我们将不胜感激。

Answer 1

在 Vue 中，如果你使用范围样式标签 <style scoped>默认情况下，您将无法选择子组件。为此，您需要使用 deep selector

<style scoped>
.form-group[required] ::v-deep legend::after {
  content: '*';
  color: red;
}
</style>

如果没有作用域，您的 css 应该可以按预期工作，但我不建议这样做，因为它会与其他组件混淆并且难以调试。

<style>
.form-group[required] legend::after {
  content: '*';
  color: red;
}
</style>