css - 为什么不应用这种嵌套的 css 样式？

Question

风格:

.airport-selections {
    margin-top: 10px;

    .airport-input {
        width: 200px;
    }
}

html:

<div class="airport-selections">
    <label class="airport-label" for="airport-from">
        Departure:     
    </label>
    <input type="text" class="airport-input">
</div>

如果我不嵌套它们，输入的宽度将设置为 200。页面上的所有样式也会发生这种情况。

Answer 1

你的CSS无效，CSS中不存在嵌套。只有 Less 或 Sass，但在那之前你还有很长的路要走。

如果你想从其他元素中选择元素，使用

.father .child{
    yourstyle
}

所有具有父类的元素内部的所有具有子类的元素都将应用样式。

.airport-selections {
    margin-top: 10px;
}
.airport-input {
    width: 200px;
}

/*or 

.airport-selections .airport-input {
   width: 200px;
}
*/

<div class="airport-selections">
    <label class="airport-label" for="airport-from">Departure:</label>
    <input type="text" class="airport-input">
</div>