爲什麼不應用此嵌套的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，或減少嵌套和其他選項。但是你那裏有什麼不會做你認爲它做的。