在具有id的元素下定位css类

Question

我的html页面结构就像这样

<div id="myPage">
   <div class="input-group bootstrap-touchspin">
       <input id="784069" class="form-control my-class touchspin" type="text" value="0" name="784069" default-field="True" style="display: block;">
   </div>
</div>

我试图用这样的css获取这个元素

#myPage .input-group .bootstrap-touchspin {
}

Answer 1

它必须是#myPage .input-group.bootstrap-touchspin，因为空格表示下一个类是前一个的子类。没有空格意味着两个类都属于同一个元素。

Answer 2

定位<input>元素

如果你想定位实际的<input>元素，你应该使用这个CSS：

#myPage .bootstrap-touchspin .touchspin {
    /* properties go here */
}

以下备选方案也都以<input>元素为目标：

#myPage .bootstrap-touchspin input.my-class {
    /* properties go here */
}

#myPage .bootstrap-touchspin input {
    /* properties go here */
}

#myPage input.touchspin {
    /* properties go here */
}

#myPage .my-class {
    /* properties go here */
}

#784069 {
    /* properties go here */
}

...

定位<div>元素

如果你想定位<div>元素周围的<input>元素，你应该使用这个CSS：

#myPage .bootstrap-touchspin {
    /* properties go here */
}

以下替代方案也应该有效：

#myPage .input-group {
    /* properties go here */
}

注意：

• 有很多方法可以组合不同的选择器，每个选择器都有自己的含义。有关概述，请查看W3Schools CSS Selector Reference。

• 在后一种情况下（定位<div>元素），可以使用#myPage .input-group.bootstrap-touchspin { ... }（没有空格）。但是，您并不需要额外的.input-group课程，因为#myPage .bootstrap-touchspin { ... }已经非常具体。有关CSS特异性的介绍，请参阅this article。