CSS的继承、权值与层叠
2019獨角獸企業重金招聘Python工程師標準>>>
筆者最近在細細學習前端方面的基礎知識。以前對CSS布局的各式“花樣”總是摸不著頭腦，可以接受的就是absolute布局~~~不過近期所學的CSS特性，相比往常，要理解的更深刻，感覺挺受用，所以在這兒總結記錄一下，直入主題吧。
- CSS繼承
CSS的某些樣式具有繼承性。這個繼承是一種規則，允許樣式不僅應用于某個特定html標簽元素，而且應用于其后代。例如：
p{color:red;border:1px solid red; }<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>顏色設置不僅應用于p標簽，還對子元素span標簽起到了作用。
但是，有些樣式是不具有繼承性的，如“border:1px solid red;”。那么哪些樣式具有繼承性呢？筆者會根據后續的學習進行追蹤報道的~
- CSS權值
有時為同一個元素設置了不同的CSS樣式代碼，那么元素會啟用哪個樣式呢？這就需要了解權值了，瀏覽器是采用權值高的樣式的。權值呢，又是跟CSS選擇器有關聯的，不同的選擇器，對應了不同的權值。
**標簽選擇器的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。**如下示例：
p{color:red;} /*權值為1*/ p span{color:green;} /*權值為1+1=2*/ .warning{color:white;} /*權值為10*/ p span.warning{color:purple;} /*權值為1+1+10=12*/ #footer .note p{color:yellow;} /*權值為100+10+1=111*/還有一個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權值最低。
說白了，選擇器越能明確地指向元素，其權值就越高！這是筆者自創的^_^
- CSS層疊
如果同一個元素，多個CSS樣式存在且具有相同的權值，層疊的概念就出來了，此時瀏覽器會根據這些CSS樣式的前后順序來決定了，最后面的CSS樣式會被應用。這個規則也解釋了關于CSS樣式的優先級問題。
- CSS優先級
在頁面中使用CSS樣式，有三種方式，內聯式、嵌入式、外部式。在相同權值的情況下，優先級依次為：
內聯式 > 嵌入式 > 外部式
上面的嵌入式 > 外部式還有前提，嵌入式CSS樣式的位置一定在外部式的后面（這也是常用的寫法習慣）！看見沒，這是符合CSS層疊規則的。
什么是外部式？
<head><link href="style.css" rel="stylesheet" type="text/css"> </head>什么是嵌入式？
<head><style type="text/css">span{color:red;}</style> </head>什么是內聯式？
<body><span style="color:red">互聯網</span> </body>轉載于:https://my.oschina.net/angerbaby/blog/473915
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的CSS的继承、权值与层叠的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 清楚利弊，用好内联
- 下一篇： sass笔记-1|Sass是如何帮你又快