css - 不要为特定的父类应用 CSS

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。

如果 NumericTextBox 在 form-inline 类下，我不希望它应用 CSS

Answer 1

对于这个特定 html 结构(.k-numerictextbox 和.form-group 之间总是有一个元素，它要么是或不是.form-inline) then

.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>

---

(请记住这是一个脆弱的规则，因为如果 .form-group 中还有另一个 .k-numerictextbox 容器它不会工作)