不要爲特定的父母類

應用CSS我有類似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>

劍道的數字文本框中有.k-numerictextbox類。和我有CSS

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

使用此設置當前CSS正在應用到NumericTextBox。

我不想CSS來如果NumericTextBox應用其下form-inline類

來源

2017-02-14 LP13

，因爲它可能不是需要我會刪除使用!important。添加其他規則更明確（包括.form-inline會做到這一點的好辦法：

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

來源

2017-02-14 22:31:04

對於這個具體 HTML結構（有.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>

（記住，這是一個脆弱的規則，因爲如果是.form-group內.k-numerictextbox的另一個容器，它不會工作）

來源

2017-02-14 22:38:33

不要爲特定的父母類

回答

相關問題