Wenden Sie keine CSS für bestimmte Eltern Klasse

Question

Ich habe html wie

<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 numerischen Textfeld hat .k-numerictextbox Klasse. und ich habe CSS

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

mit diesen Einstellungen wird derzeit CSS auf NumericTextBox angewendet.

ich nicht CSS auf NumericTextBox anwenden möchten, wenn seine unter form-inline Klasse

Answer 1

entferne ich würde !important verwenden, da es wahrscheinlich nicht benötigt. Fügen Sie eine weitere Regel mit mehr Spezifität (einschließlich der .form-inline wäre ein guter Weg, dies zu tun:

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

Answer 2

Für diese spezifische HTML-Struktur (gibt es immer ein Element zwischen .k-numerictextbox und .form-group die entweder ist oder nicht .form-inline) dann

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

---

(bedenken Sie, dass es sich um eine fragile Regel ist, denn wenn es noch ein weiterer Behälter der .k-numerictextbox innerhalb der .form-group ist, wird es nicht arbeiten)