css - 为什么不应用此嵌套的CSS样式？

样式：

.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。页面上的所有样式也会发生这种情况。

最佳答案

您的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>

关于css - 为什么不应用此嵌套的CSS样式？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32802178/