莫比斯風格遊戲《沙貝》實機演示 無盡沙丘中解謎探險
阿新 • • 發佈:2021-06-16
層疊性
層疊性是指當一個標籤被設定了多個重複的樣式的時候會發生衝突,一個屬性會覆蓋另外一個屬性。
覆蓋性原則:
-
層疊性主要遵循的原則是就近原則,在不考慮優先順序的情況下,在多個樣式中最終生效的樣式是離標籤最近的樣式
-
這裡要注意只覆蓋同樣的不可重複的樣式屬性,不會覆蓋允許重複的屬性
示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ background-color: red; } div{ background-color: blue; } </style> </head> <body> <div>123</div> <!-- 最終背景顏色是藍色 --> <div style="background-color: green;">123</div> <!-- 最終背景顏色是綠色 --> </body> </html>
繼承性
繼承性是指當子標籤沒有設定樣式時,會繼承父標籤的樣式
子元素可以繼承父元素的樣式包括:text-
文字屬性、font-
字型屬性、line-
行高以背景類屬性,要注意子標籤不會繼承父標籤的寬度、高度、邊距屬性
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Document</title> <style> div{ font-size:70px; background-color: #CCC; color:skyblue; } </style> </head> <body> <div> <p>p繼承div的樣式</p> </div> </body> </html>
優先順序
當一個元素制定了多個選擇器時就會有選擇器的優先順序
- 選擇器相同,則執行層疊性
- 選擇器不同,優先順序為,注意優先順序逐級變大
- 繼承的權重為(0,0,0,0)
- 標籤選擇器的權重為(0,0,0,1)
- 類、偽類選擇器的權重為(0,0,1,0)
- id選擇器選擇器的權重為(0,1,0,0)
- 行內樣式的權重為(1,0,0,0)
- !important的權重無限大