(前端)html与css，css 4 、继承性和层叠性
生活随笔
收集整理的這篇文章主要介紹了
(前端)html与css，css 4 、继承性和层叠性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
1、繼承性
層疊式的第一個特性:繼承性
繼承性:給祖先設置屬性，后代會繼承祖先里的某些屬性(并不是全部屬性都繼承過來)
代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style type="text/css">.box{width: 300px;height: 300px;background: skyblue;border: 1px solid red;color: green;font-size: 30px;font-weight: bold;}</style> </head> <body><div class="box"><h2>這是標題</h2><p>這是段落</p><p>這是段落</p></div> </body> </html> View Code?←給名為box的div設置屬性，它的后代，也就是圖里的h2和p標簽就會繼承box的一些屬性。
css繼承性:后代元素能繼承來自祖先元素的文字樣式，不能繼承盒子樣式。
通過控制臺看樣式來源↓
效果圖↓
可以從效果圖里看出來，文字繼承了祖先的文字屬性。
繼承性這個特性很好，可以將整體的文字樣式寫在最祖先body，后面的標簽自動去繼承，如果有特殊屬性，只要把這個標簽單獨寫就可以。
?2、層疊性
層疊式第二個特性:層疊性
有很多種選擇器，同一個標簽可以用多個選擇器選中。
問題:多個選擇器選中一個元素，相同的樣式聽誰的？
選擇器權重問題:權重高的會覆蓋掉權重低的。
標簽、類、id權重比較: (通配符權重最低)
代碼↓
效果圖↓
通過控制臺查看↓
id選擇器權重>類選擇器>標簽選擇器，同樣選中一個標簽，誰的權重高，重復屬性就聽誰的。
到底一個標簽的樣式聽誰的:
①選擇器都選中了元素。
首先比較權重，權重大的樣式層疊權重小的。
計算權重方法:數基礎選擇器的個數，依次比較id個數→類的個數→標簽個數
代碼↓
圖解↓
效果圖↓
控制臺↓
?
遇到并集選擇器:
需要把并集的每一項單獨拿出來數
例如↓
需要把它拆開來數注意:不要把并集選擇器都算在一起數
代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style>.box1 .box2 .box3 p{color: red;}.box1 #box2 p{color: blue;}.box1 .box2 #box3 p,.box4 p{color: green;}</style> </head> <body><div class="box1" id="box1"><div class="box2" id="box2"><div class="box3" id="box3"><p>看看我的顏色聽誰的</p></div></div></div><div class="box4"><p>顏色</p></div> </body> </html> View Code效果圖↓
如果權重一樣，比較書寫順序，誰寫在后面聽誰的。代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style>.box1 #box2 .box3 p{color: red;}.box1 .box2 #box3 p{color: blue;}#box1 .box2 .box3 p{color: pink;}</style> </head> <body><div class="box1" id="box1"><div class="box2" id="box2"><div class="box3" id="box3"><p>看看我的顏色聽誰的</p></div></div></div> </body> </html> View Code圖解↓
效果圖↓
書寫在最后面的疊蓋掉前面的。
?②如果沒有選中元素，樣式靠繼承
第一種:祖先元素距離目標元素距離不同，繼承的樣式聽最近的，就近原則。
代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style>.box1{color: red;}.box1 .box2 #box3{color: blue;}#box1 .box2{color: pink;}</style> </head> <body><div class="box1" id="box1"><div class="box2" id="box2"><div class="box3" id="box3"><p>看看我的顏色聽誰的</p></div></div></div> </body> </html> View Code圖解↓
效果圖↓
第二種:如果距離相同，去比較權重。
代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style>.box1 #box2 .box3{color: red;}.box1 .box2#box2 .box3#box3{color: blue;}#box1 .box2 #box3{color: pink;}</style> </head> <body><div class="box1" id="box1"><div class="box2" id="box2"><div class="box3" id="box3"><p>看看我的顏色聽誰的</p></div></div></div> </body> </html> View Code發現都選中了box3，他們離p的距離相同，那么就要用前面的權重大小來判定p聽誰的。
所以↓
第三種:如果距離相同，權重相同，后寫的層疊前面的。
代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style>.box1 .box2#box2 .box3{color: red;}.box1 .box2#box2 .box3{color: blue;}.box1 .box2 .box3#box3{color: yellow;}</style> </head> <body><div class="box1" id="box1"><div class="box2" id="box2"><div class="box3" id="box3"><p>看看我的顏色聽誰的</p></div></div></div> </body> </html> View Code效果圖↓
③關鍵字important(重要的)
這個關鍵字是給單一屬性添加的，它會給這個屬性的權重提升到最大。
使用前提:不適用于就近原則。
代碼↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style>.box1 .box2#box2 .box3{color: red !important;}.box1 .box2#box2 .box3{color: blue;}.box1 .box2 .box3#box3{color: yellow;}</style> </head> <body><div class="box1" id="box1"><div class="box2" id="box2"><div class="box3" id="box3"><p>看看我的顏色聽誰的</p></div></div></div> </body> </html> View Code添加方法在屬性值后面書寫!important
效果圖↓
不適用于就近原則示范↓
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>Document</title><style>.box1 .box2{color: red !important;}.box1 .box2#box2{color: blue;}.box1 .box2 .box3#box3{color: yellow;}</style> </head> <body><div class="box1" id="box1"><div class="box2" id="box2"><div class="box3" id="box3"><p>看看我的顏色聽誰的</p></div></div></div> </body> </html> View Code效果圖↓
?
轉載于:https://www.cnblogs.com/StevenSunYiwen/p/11009657.html
超強干貨來襲 云風專訪：近40年碼齡，通宵達旦的技術人生總結
以上是生活随笔為你收集整理的(前端)html与css，css 4 、继承性和层叠性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 第二章：05变量
- 下一篇： HTML 4.01 event 事件