CSS - 按父标记设置边框

Question

我有这个html结构：

<div class="col-md-6 parent error">
  <div class="container">
    <input type="text" class="form-control my-input">
  </div>
</span>

当<div class="parent">出现类错误时，我想设置红色边框。我无法在输入中插入错误类，因为div container不是我的元素，它在组件中。

我知道：

.ngx-datepicker-container > .ngx-datepicker-input{
    border: 1px solid red!important;
}

但总是设置红色边框。我只在parent div有错误类时才需要。

感谢您的建议

Answer 1

试试这个

.parent.error input {
    border: 1px solid red!important;
}

Answer 2

首先，您要使用div标记关闭span代码。至于你的问题，请使用.error input选择器。如果有错误类它将起作用，否则它不会：

＆＃13;

＆＃13;

.error input{
    border: 1px solid red!important;
}

＆＃13;

<div class="col-md-6 parent error">
  <div class="container">
    <input type="text" class="form-control my-input">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用

<div class="parent error">
  <div class="container">
    <div class="row">
      <input type="text">
    </div>
  </div>
</div>

div.parent.error input {
 border: 1px solid red;

}