css樣式層級問題,樣式層級關(guān)系

CSS樣式優(yōu)先級問題（如能正確回答，有積分獎(jiǎng)勵(lì)）

設(shè)帶“#”的id選擇符權(quán)重為100，帶“.”的類選擇符權(quán)重為10，不帶什么“”的選擇符權(quán)重為1,；則由上至下的代碼，后邊寫的樣式權(quán)重大于等于前面寫的樣式時(shí)，會(huì)覆蓋前面的樣式。

創(chuàng)新互聯(lián)是專業(yè)的宜黃網(wǎng)站建設(shè)公司，宜黃接單;提供成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站,網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行宜黃網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

然后按樓主的要求來分析，一共是三個(gè)樣式：

#div1 td{ color:#FF0000}

#div1 .blue{color:#0000FF}

.bluecolor:#0000FF}

第一個(gè)權(quán)重為一個(gè)“#”加“” = 100+1 = 101

第二個(gè)權(quán)重為一個(gè)“#”加“.” = 100+10=110

第三個(gè)權(quán)重為一個(gè)“.”=10

則，很明顯，當(dāng)一二組合時(shí)，第二個(gè)可以覆蓋掉第一個(gè)的樣式；當(dāng)一三組合時(shí)，第三個(gè)不能覆蓋掉第一個(gè)樣式，則兩個(gè)同為紅色。

如不明，再發(fā)問...

css父級的層級不對會(huì)導(dǎo)致deep失效嗎？

會(huì)啊，層級對于css樣式來說是很重要的。層級直接決定了，樣式是否生效。

CSS關(guān)于層級關(guān)系的問題。。。

div class="banner"

object type="application/x-shockwave-flash" data="flash/930100.swf" width="930" height="100"

param name="allowscriptaccess" value="always"

!-- 解決 IE 6 7 8 層疊問題 --

param name="wmode" value="transparent"

param name="movie" value="flash/930100.swf" width="930" height="100"

embed src="flash/930100.swf" width="930" height="100" border="0" align="center" allowscriptaccess="always" wmode="transparent"

/object

/div

css樣式如何控制div到最頂層

1、新建一個(gè)html文件，命名為test.html

2、在test.html文件內(nèi)，使用css設(shè)置頁面所有的div寬度為300px，高度為300px，div的位置為絕對定位。

3、在test.html文件內(nèi)，創(chuàng)建三個(gè)div，并用文字標(biāo)識(shí)，分別為底層div、中層div、最頂層div。

4、在test.html文件內(nèi)，分別給三個(gè)div設(shè)置class屬性為one、two、three，用于下面對類名進(jìn)行樣式設(shè)置。

5、在css標(biāo)簽內(nèi)，設(shè)置類名為one的div樣式，設(shè)置其背景顏色為紅色，距離頁面左邊緣為0，距離頁面上邊緣為0，同時(shí)使用z-index設(shè)置其層級為1。

6、在css標(biāo)簽內(nèi)，設(shè)置類名為two的div樣式，設(shè)置其背景顏色為黃色，距離頁面左邊緣為50px，距離頁面上邊緣為50px，同時(shí)使用z-index設(shè)置其層級為2，即在類名為one的div的上面。

7、在css標(biāo)簽內(nèi)，設(shè)置類名為three的div樣式，設(shè)置其背景顏色為粉紅色，距離頁面左邊緣為100px，距離頁面上邊緣為100px，同時(shí)使用z-index設(shè)置其層級為3，即在頁面三個(gè)div中的最頂層。

8、在瀏覽器打開test.html文件，查看實(shí)現(xiàn)的層級效果。

網(wǎng)頁CSS元素浮動(dòng)的層次順序問題。

層級關(guān)系的布局有兩種解決方法：

一種方法是使用標(biāo)簽的自然順序和嵌套順序來形成合理的布局。

而第一種方法卻不是萬能的，有時(shí)候我們需要將原本位于下層的元素移到另一個(gè)元素上方，那可以使用z-index；

當(dāng)你定義的CSS中有position屬性值為absolute、relative或fixed，

用z-index此取值方可生效。

此屬性參數(shù)值越大，則被層疊在最上面。

例子：

html

head

style

.z1,.z2,.z3{position:absolute;width:200px;height:100px;padding:5px 10px;color:#fff;text-align:right;}

.z1{z-index:1;background:#000;}

.z2{z-index:2;top:30px;left:30px;background:#C00;}

.z3{z-index:3;top:60px;left:60px;background:#999;}

/style

/head

body

div class="z1"z-index:1/div

div class="z2"z-index:2/div

div class="z3"z-index:3/div

/body

/html

上面三個(gè)CSS，將根據(jù)z-index的值決定誰在最上層！

名稱欄目：css樣式層級問題,樣式層級關(guān)系
文章鏈接：http://muchs.cn/article0/phecoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站排名、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、靜態(tài)網(wǎng)站、企業(yè)建站、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)