在CSS中，如何更有效地選擇許多嵌套元素？

Question

看看這個CSS文件：

#footer {...} 

#footer a {...} 

#footer .b {...} 

... 

我只是想編寫特定CSS來#footer，有沒有辦法只能寫一次#footer？

我的意思是，確實有CSS語法是這樣的：

#footer { 
    ... 
    a {...} 
    .b {...} 
    ... 
} 

Answer 1

看到http://lesscss.org/場所和滾動到嵌套規則部分， 還要檢查它下面就是例子。希望這會幫助你。

// LESS 


#header { 
    h1 { 
    font-size: 26px; 
    font-weight: bold; 
    } 
    p { font-size: 12px; 
    a { text-decoration: none; 
     &:hover { border-width: 1px } 
    } 
    } 
} 

/* Compiled CSS */ 

#header h1 { 
    font-size: 26px; 
    font-weight: bold; 
} 
#header p { 
    font-size: 12px; 
} 
#header p a { 
    text-decoration: none; 
} 
#header p a:hover { 
    border-width: 1px; 
} 

感謝 傑里米·福格斯

Answer 2

您可以使用薩斯（http://sass-lang.com/），太。

在那裏，它是可以寫：

#footer{ 
    font-size: 12px; 
    p{ 
    padding: 5px; 
    } 
    .class{ 
    margin: 10px 5px; 
    } 
} 

所以可以使用嵌套的特徵。但它也支持變量和一種叫做Mixins的函數。

使用Sass的好工具是Compass（http://compass-style.org/）。