這篇文章主要介紹CSS樣式繼承和層疊的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
一:基本選擇器
標(biāo)簽選擇:根據(jù)頁面當(dāng)中標(biāo)簽名字進(jìn)行選擇,直接把樣式應(yīng)用到指定的標(biāo)簽上。
特點(diǎn):
1.標(biāo)簽選擇器會(huì)對(duì)當(dāng)年頁面當(dāng)中所有的指定標(biāo)簽進(jìn)行選擇;
2.標(biāo)簽選擇器對(duì)代碼的當(dāng)前標(biāo)簽層次結(jié)構(gòu)沒有任何關(guān)聯(lián),只要是在當(dāng)前頁面上,都能被選中。
id選擇:需要先指定一個(gè)標(biāo)簽設(shè)置id值(id值不能重復(fù)是整個(gè)頁面中的)。
class選擇:通過給標(biāo)簽取類名,通過類選擇器選擇指定標(biāo)簽。
二:三套復(fù)雜選擇器
1.后代選擇器
A、可以根據(jù)當(dāng)前選擇中的標(biāo)簽,找到后續(xù)子標(biāo)簽
B、后代選擇器可以進(jìn)行多層精確選擇
2.交集選擇器
格式:第一層選擇第二層選擇{}
注意:點(diǎn)表示交集,一般以標(biāo)簽開頭
3.并集選擇器
格式:第一個(gè)選擇器,第二個(gè)選擇器,…{}
三:css繼承性
定義:有一些樣式,在給當(dāng)前標(biāo)簽設(shè)置的時(shí)候,同時(shí)會(huì)給它后代標(biāo)簽進(jìn)行設(shè)置
注意:繼承到樣式的標(biāo)簽和定義樣式的標(biāo)簽必須是從屬關(guān)系(后代標(biāo)簽關(guān)系)
對(duì)文本樣式設(shè)置的基本屬性才能被繼承(顏色color\樣式text\字體font\行屬性line)
所有關(guān)于對(duì)于盒子模型(div、span等)的屬性設(shè)置(border、定位、布局)都不能被繼承
四:css層疊性
定義:多個(gè)選擇器同時(shí)作用在同一個(gè)標(biāo)簽上的時(shí)候,會(huì)根據(jù)優(yōu)先級(jí)別來進(jìn)行樣式作用
選擇器的判定方式:
-通過權(quán)值判斷法
-通過每一個(gè)選擇其中的id選擇、類選擇、標(biāo)簽選擇數(shù)量來計(jì)做權(quán)值(ICE)
-先比較id權(quán)值,再次比較類、最后比較標(biāo)簽
-全部一樣比較順序
注意:如果權(quán)值一樣,則后面覆蓋前面。數(shù)權(quán)值的前提是一定保證每一條選擇器必須要選中指定元素。
如果作用域沒有直接作用到標(biāo)簽本身上,則體現(xiàn)的就是就近原則
important優(yōu)先級(jí)高,*優(yōu)先級(jí)最低
以上是“CSS樣式繼承和層疊的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
本文標(biāo)題:CSS樣式繼承和層疊的示例分析-創(chuàng)新互聯(lián)
本文路徑:http://jinyejixie.com/article40/dpcoho.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站設(shè)計(jì)、ChatGPT、網(wǎng)站建設(shè)、定制網(wǎ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)
猜你還喜歡下面的內(nèi)容