簡單學(xué)習(xí)css組合與CSS嵌套的寫法
互聯(lián)網(wǎng) 發(fā)布時間:2009-04-02 19:38:24 作者:佚名
我要評論

網(wǎng)頁制作Webjx文章簡介:簡單學(xué)習(xí)css組合與CSS嵌套的寫法.
CSS組合
你不必重復(fù)有相同屬性的多個選擇符,你只要用英文逗號(,)隔開選擇符就可以了。
比如,你有如下的代碼:
h2 { color: red; }
.webjx { col
簡單學(xué)習(xí)css組合與CSS嵌套的寫法.
CSS組合
你不必重復(fù)有相同屬性的多個選擇符,你只要用英文逗號(,)隔開選擇符就可以了。
比如,你有如下的代碼:
h2 { color: red; }
.jb51 { color: red; }
.jb51com { color: red; }
則你可以這樣寫:
h2,.jb51,.jb51com { color: red; }
使用組合,你可以一次定義多個CSS,為你節(jié)省很多字節(jié)和時間。
CSS嵌套
CSS結(jié)構(gòu)好的話,沒有必要使用過多的類或者標(biāo)識選擇符。這是因為你可以指定在選擇符內(nèi)的選擇符。(或者更好的說法,上下文選擇符--譯者著)
比如:
#top { background-color: #ccc; padding: 1em }
#top h1 { color: #ff0; }
#top p { color: red; font-weight: bold; }
這就減去不必要的類或者標(biāo)識選擇符,如果應(yīng)用到像這樣的HTML中:
<div id="top">
<h1>jb51.net</h1>
<p>This is my recipe for making curry purely with chocolate</p>
<p>Mmm mm mmmmm</p>
</div>
這是因為,用英文半角空格間隔選擇符,我們指明了在標(biāo)識id內(nèi)的h1有“#ff0”的顏色,而p則是紅色red和粗體bold。
這可能也會有些復(fù)雜(因為可能不止兩級,比如在內(nèi)在內(nèi)在內(nèi)在內(nèi)等等)。你有必要多加練習(xí)。
使用嵌套,可以讓你的CSS代碼讀起來更清晰,能給你制定的元素定制CSS。
相關(guān)文章
CSS實現(xiàn)多層嵌套結(jié)構(gòu)最外層旋轉(zhuǎn)其它層不旋轉(zhuǎn)效果
這篇文章主要介紹了CSS實現(xiàn)多層嵌套結(jié)構(gòu)最外層旋轉(zhuǎn)其它層不旋轉(zhuǎn)效果,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨2020-02-05純css多種方法實現(xiàn)div中單行文字、多行文字及嵌套div垂直水平居中
經(jīng)常遇到要居中的問題,水平居中問題比較好解決,而垂直居中問題因為vertical-align經(jīng)常失效,下面與大家分享下幾個不錯的解決方法2014-04-24LESS 讓css也支持變量,運算符,include,嵌套規(guī)則等等
最近在網(wǎng)上看到1個很有意思的CSS擴展,這里介紹給大家。LESS 最早是1個ruby的gem,用于擴展css的語法,用了LESS后,可以在css中使用變量,運算符,include,嵌套規(guī)則等等。2010-07-04- 除非你的網(wǎng)站只有一頁,不然你一定會用的導(dǎo)航的.事實上,導(dǎo)航在網(wǎng)頁設(shè)計中是最重要部分之一.你要用很多時間去考慮如何讓瀏覽者更容易訪問你的網(wǎng)站.2009-11-30
CSS 即將支持嵌套,SASS/LESS 等預(yù)處理器該何去何從
隨著 CSS 自定義屬性(CSS Variable)的大規(guī)模兼容,到如今 CSS 即將支持嵌套,一些預(yù)處理器的核心功能已經(jīng)被 CSS 原生支持,這是否表示 SASS/LESS 等預(yù)處理器已無用武之地2021-08-10