? ? CSS三大特性
? ? ? ? 1 繼承性
? ? ? ? 2 層疊性
? ? ? ? 3 優(yōu)先級(jí)
? ? ? ? 1 繼承性
? ? ? ? ? ? 特性：子元素有默認(rèn)繼承父元素樣式的特點(diǎn)（子承父業(yè)）
? ? ? ? ? ? 可以繼承的常見屬性：
? ? ? ? ? ? ? ? 1 color
? ? ? ? ? ? ? ? 2 font-style、font-weight、font-size、font-family
? ? ? ? ? ? ? ? 3 text-indent、text-align
? ? ? ? ? ? ? ? 4 line-height
? ? ? ? ? ? ? ? 5 ……
? ? ? ? ? ? 注意：可以通過調(diào)試工具判斷樣式是否可以繼承
? ? ? ? ? ? 拓展
? ? ? ? ? ? ? ? 繼承的應(yīng)用
? ? ? ? ? ? ? ? ? ? 好處：可以在一定程度上減少代碼
? ? ? ? ? ? ? ? ? ? 常見應(yīng)用場(chǎng)景：
? ? ? ? ? ? ? ? ? ? ? ? 1 可以直接給ul設(shè)置 list-style:none 屬性，從而去除列表默認(rèn)的小圓點(diǎn)樣式
? ? ? ? ? ? ? ? ? ? ? ? 2 直接給body標(biāo)簽設(shè)置統(tǒng)一的font-size，從而統(tǒng)一不同瀏覽器默認(rèn)文字大小
? ? ? ? ? ? ? ? 繼承失效的特殊情況
? ? ? ? ? ? ? ? ? ? 如果元素有瀏覽器默認(rèn)樣式，此時(shí)繼承性依然存在，但是優(yōu)先顯示瀏覽器的默認(rèn)樣式
? ? ? ? ? ? ? ? ? ? 1 a標(biāo)簽的color會(huì)繼承失效
? ? ? ? ? ? ? ? ? ? ? ? 其實(shí)color屬性繼承下來了，但是被瀏覽器默認(rèn)設(shè)置的樣式給覆蓋掉了
? ? ? ? ? ? ? ? ? ? 2 h系列標(biāo)簽的font-size會(huì)繼承失效
? ? ? ? ? ? ? ? ? ? ? ? 其實(shí)font-size屬性繼承下來了，但是被瀏覽器默認(rèn)設(shè)置的樣式給覆蓋掉了
? ? ? ? ? ? ? ? ? ? 3 div的高度不能繼承，但是寬度有類似于繼承的效果
? ? ? ? ? ? ? ? ? ? ? ? 寬度屬性不能繼承，但是div有獨(dú)占一行的特性
? ? ? ? 2 層疊性
? ? ? ? ? ? 特性：
? ? ? ? ? ? ? ? 1 給同一個(gè)標(biāo)簽設(shè)置不同的樣式 → 此時(shí)樣式會(huì)層疊疊加 → 會(huì)共同作用在標(biāo)簽上
? ? ? ? ? ? ? ? 2 給同一個(gè)標(biāo)簽設(shè)置相同的樣式 → 此時(shí)樣式會(huì)層疊覆蓋 → 最終寫在最后的樣式會(huì)生效
? ? ? ? ? ? 注意點(diǎn)：
? ? ? ? ? ? ? ? 1 當(dāng)樣式?jīng)_突時(shí)，只有當(dāng)選擇器優(yōu)先級(jí)相同時(shí)，才能通過層疊性判斷結(jié)果
? ? ? ??
? ? ? ? 3 優(yōu)先級(jí)
? ? ? ? ? ? 特性：不同選擇器具有不同的優(yōu)先級(jí)，優(yōu)先級(jí)高的選擇器樣式會(huì)覆蓋優(yōu)先級(jí)低選擇器樣式
? ? ? ? ? ? 優(yōu)先級(jí)公式：（作用范圍越大，優(yōu)先級(jí)越低）
? ? ? ? ? ? ? ? 繼承 < 通配符選擇器 < 標(biāo)簽選擇器 < 類選擇器 < id選擇器 < 行內(nèi)樣式 < !important（聲明樣式具有最高優(yōu)先級(jí)）
? ? ? ? ? ? 注意點(diǎn)：
? ? ? ? ? ? ? ? 1 !important寫在屬性值的后面，分號(hào)的前面
? ? ? ? ? ? ? ? 2 !important不能提升繼承的優(yōu)先級(jí)
? ? ? ? ? ? ? ? 3 給繼承父級(jí)的元素添加!important無效
? ? ? ? ? ? ? ? 4 實(shí)際開發(fā)中不建議使用 !important
? ? ? ? ? ? ? ??
? ? ? ? 3.1? 權(quán)重疊加計(jì)算
? ? ? ? ? ? 場(chǎng)景：如果是復(fù)合選擇器，此時(shí)需要通過權(quán)重疊加計(jì)算方法，判斷最終哪個(gè)選擇器優(yōu)先級(jí)最高會(huì)生效
? ? ? ? ? ? 權(quán)重疊加計(jì)算公式：（行內(nèi)式，id選擇器，類選擇器，標(biāo)簽選擇器）
? ? ? ? ? ? ? ? 比較規(guī)則：左邊個(gè)數(shù)越多，權(quán)重越大，左邊個(gè)數(shù)相同，下一級(jí)個(gè)數(shù)越多，權(quán)重越大
? ? ? ? ? ? 提示：!important權(quán)重最大，繼承權(quán)重最小
? ? ? ? ? ? 權(quán)重計(jì)算題解題步驟：
? ? ? ? ? ? ? ? 1 先判斷選擇器是否能直接選中標(biāo)簽，如果不能直接選中 → 是繼承，優(yōu)先級(jí)最低 → 直接pass
? ? ? ? ? ? ? ? 2 通過權(quán)重計(jì)算公式，判斷誰權(quán)重最高
? ? ? ? ? ? 注意：
? ? ? ? ? ? ? ? 實(shí)際開發(fā)中選擇標(biāo)簽需要精準(zhǔn)，盡量避免多個(gè)選擇器同時(shí)選中一個(gè)標(biāo)簽的情況，不要自己難為自己
代碼：繼承性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 400px; height: 300px; background-color: pink; /* 被繼承字體大小 */ font-size: 18px; /* 被繼承文字顏色 */ color: blue; /* 被繼承文字粗細(xì) */ font-weight: 700; } /* h3、p標(biāo)簽都沒設(shè)置樣式，它們都繼承了div的樣式，瀏覽器按F12看可查看繼承樣式 */ </style> </head> <body> <div class="box"> 我是div標(biāo)簽 <h3>我是h3標(biāo)題，繼承了div標(biāo)簽文字的大小、顏色和粗細(xì)</h3> <p>回到過去，也只會(huì)重蹈覆轍而已</p> <p>因?yàn)楫?dāng)時(shí)的你，會(huì)做出同樣的選擇</p> <p>時(shí)間不等人，現(xiàn)在開始一切都來得及</p> </div> </body> </html>效果圖：
?文章來源地址http://www.zghlxwxcb.cn/news/detail-501159.html
代碼：層疊性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{ width: 400px; height: 300px; font-size: 18px; font-weight: 700; /* 字體顏色層疊 */ color: blue; color: brown; /* 背景顏色層疊 */ background-color: pink; background-color: green; } </style> </head> <body> <div class="box"> 我是div標(biāo)簽 <h3>我是h3標(biāo)題，繼承了div標(biāo)簽文字的大小、顏色和粗細(xì)</h3> <p>回到過去，也只會(huì)重蹈覆轍而已</p> <p>因?yàn)楫?dāng)時(shí)的你，會(huì)做出同樣的選擇</p> <p>時(shí)間不等人，現(xiàn)在開始一切都來得及</p> </div> </body> </html>效果圖：
?
代碼：優(yōu)先級(jí)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /* 行內(nèi)式，id選擇器，類選擇器，標(biāo)簽選擇器 */ /* 0,1,0,0 */ #pp{ width: 400px; height: 300px; font-size: 18px; font-weight: 700; color: blue; background-color: pink; } /* 行內(nèi)式，id選擇器，類選擇器，標(biāo)簽選擇器 */ /* 0,0,1,2 */ div div .box2{ width: 400px; height: 300px; font-size: 18px; font-weight: 700; color: brown; background-color: green; } </style> </head> <body> <div class="box"> 我是div標(biāo)簽 <h3>我是h3標(biāo)題，繼承了div標(biāo)簽文字的大小、顏色和粗細(xì)</h3> <div class="box2" id="pp"> <p>回到過去，也只會(huì)重蹈覆轍而已</p> <p>因?yàn)楫?dāng)時(shí)的你，會(huì)做出同樣的選擇</p> <p>時(shí)間不等人，現(xiàn)在開始一切都來得及</p> </div> </div> </body> </html>效果圖：
文章來源：http://www.zghlxwxcb.cn/news/detail-501159.html
?
到了這里，關(guān)于CSS3-三大特性-繼承性、層疊性、優(yōu)先級(jí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
