Question

我有像

这样的HTML

<div class="row">
  <div class="col-md-3">
    <div class="form-group">
      <label class="control-label">Values</label>
      <div class="form-inline">
        @Html.Kendo().NumericTextBoxFor(m => m.Min).Decimals(2);
        @Html.Kendo().NumericTextBoxFor(m => m.Max).Decimals(2);
      </div>
    </div>
  </div>
</div>

Kendo的数字文本框有.k-numerictextbox个类。我有CSS

.form-group .k-numerictextbox {
    width: 100% !important;
}

使用此设置当前CSS已应用于NumericTextBox。

如果它位于form-inline类

之下，我不希望CSS应用于NumericTextBox

Answer 1

对于特定的 html结构（ SCNMaterial和.k-numerictextbox之间始终存在一个元素.form-group ）然后

.form-inline

.form-group *:not(.form-inline) .k-numerictextbox {
  width:100%;
}

（请注意，这是一个脆弱的规则，因为如果<div class="row"> <div class="col-md-3"> <div class="form-group"> <label class="control-label">Values</label> <div class="form-inline"> <input class="k-numerictextbox" /> </div> </div> </div> </div> <div class="row"> <div class="col-md-3"> <div class="form-group"> <label class="control-label">Values</label> <div class="form-not-inline"> <input class="k-numerictextbox" /> </div> </div> </div> </div>中还有另一个.k-numerictextbox容器，它将无效）

Answer 2

我会删除使用!important，因为它可能不需要。添加另一个更具特异性的规则（包括.form-inline将是一个很好的方法：

.form-group .k-numerictextbox {
    width: 100%;
}
.form-group .form-inline .k-numerictextbox {
    width: auto;
}

不要为特定父类

2 个答案: