html - 如何在特定的 div 上应用 css？

Question

我有以下 HTML

<form>>
    <div class="form-group">
        <div class="search-col"> 
            <input type="text" class="form-control">
        </div>
        <div class="search-col">
            <input type="text" class="form-control" >
        </div>  
    </div>
</form>

<form>>
    <div class="form-group">
        <div class="search-col1"> 
            <input type="text" class="form-control">
        </div>
        <div class="search-col1">
            <input type="text" class="form-control" >
        </div>  
    </div>
</form>

我想覆盖 search-col 类的 form-group 和 form-control 的行为，但不是 搜索列 1。我该怎么做？

这就是我想要的

.form-group .form-control .search-col{
  outline: none;
  background-image: none;
  -webkit-background-size: none;
  -webkit-box-shadow: none;
  -webkit-transition-duration: none;
}

Answer 1

您的选择器顺序有误。应该是:

.form-group .search-col .form-control {...}

CSS 目标以 DOM 元素的父/子关系顺序排列。这基本上是说在 .form-group 类中的 .search-col 类中设置 .form-control 类的样式。