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>

我想要覆盖form-group类的form-control和search-col的行为，而不是search-col1的行为。我怎么能这样做？

这就是我正在尝试的

.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类的样式。

Answer 2

您的HTML结构与您的CSS选择器不匹配。

应该是：

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

或者，就此而言，它甚至可能是：

.search-col { ... }

Answer 3

您是否尝试为各个容器设置样式？正如其他人指出的那样，确保选择器的顺序是正确的。你不应该真的必须覆盖＆＃39;任何事情，因为每个部分的风格都不一样。我在下面提供了一张示例图片。

.form-group {
  background-color: #ccc;
  padding: 20px;
}

.form-group {
  padding: 10px;
  margin: 5px;
  border: 2px solid black;
}

.form-control {
  background-color: #abc;
}

/* Notice how each class gives a different style */
.search-col {
  background-color: #75AD63;
  padding: 10px;
}

.search-col1 {
  background-color: #A1D490;
  background-origin: ;
  padding: 10px
}

如果要覆盖作为另一个div的子元素的特定元素，可以使用右尖括号来选择它们，就像我在下面所做的那样。连接的图像是输出。

.form-group > .search-col > .form-control {
  background-color: red;
}

Example Styling

请注意我并没有改变表单控件类的原始样式。

如何在特定div上应用css？

3 个答案: