时间戳

首页 > 解决方案 > HTML 元素在其上应用 CSS 时被忽略

html - HTML 元素在其上应用 CSS 时被忽略

问题描述

我一直在使用 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 似乎无法识别图例元素，无论我做什么或如何编写它。如果我使用标签而不是图例，那也是一样的。我也尝试过使用 fieldset （父级）的 nth-child(0) ，但似乎它只是忽略了这个孩子，并没有真正发生任何事情。我认为这与我正在使用的引导程序的 CSS 配置有关，但使用 !important 似乎没有任何作用。

任何帮助将不胜感激。

标签： htmlcssvue.js

解决方案

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

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

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

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

推荐阅读