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

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