似乎這將是一個很好的方式來讓CSS結構化。有沒有可能導致這種不可能的事情?爲什麼不在CSS中嵌套?
我想到的是類似以下內容:
table#myTable{
thead{
color:red;
}
tbody{
color:blue;
td.title{
background-color: green;
}
}
}
似乎這將是一個很好的方式來讓CSS結構化。有沒有可能導致這種不可能的事情?爲什麼不在CSS中嵌套?
我想到的是類似以下內容:
table#myTable{
thead{
color:red;
}
tbody{
color:blue;
td.title{
background-color: green;
}
}
}
我不能回答爲什麼 CSS不具備此功能。有一些系統,比如LESS(http://lesscss.org/)可以讓你編寫這樣的結構,然後將它們「編譯」爲常規的CSS。在不到
嵌套例如:(從該鏈接)
嵌套規則 而不是構建長選擇名稱來指定繼承,欠你可以選擇其他的只是裏面築巢選擇。這使得繼承清晰並縮短了樣式表。
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
..正如其他海報所說,SASS是另一種選擇。我自己並沒有使用它們,所以不能告訴你哪個更好,雖然看起來不像SASS的不同語法更像「CSS +」。 – 2010-12-22 16:17:58
這將是很好,但這是CSS設計和組織的方式不支持。
但是,有些CSS預處理器允許您以此方式編碼,然後將其處理爲真實有效的CSS - 例如LessCSS。
您可以根據您的文檔結構仍然縮進您的選擇:
body {
font-size: 1.4em;
color: #666;
}
#Header {
/* stuff */
}
#Header ul {
/* stuff */
}
#Header il {
/* stuff */
}
#Content {
/* stuff */
}
除了零星的背景圖像:網址(「」);屬性通常不會運行很長,並且在開發過程中可能會幫助您保持組織。我個人更喜歡無縮進的CSS,因爲我經常讓Textmate重新格式化我的樣式表。
查看http://lesscss.org/ – Emmett 2010-12-22 16:12:43
和http://sass-lang.com/ – 2010-12-22 16:15:27