为什么不应用此嵌套的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中没有嵌套的东西。只有更少或萨斯，但你还有很长的路要走。

如果您要选择从内部其他元素，使用

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

Answer 2

没有一个CSS预编译器，有没有这样的东西作为嵌套的CSS样式。

检查出SASS，或减少嵌套和其他选项。但是你那里有什么不会做你认为它做的。