好程序員HTML5培訓教程-css樣式的繼承性、層疊性、優先級

時間 2019-12-12

標籤程序員 html5 html 培訓教程 css 樣式繼承性層疊優先級欄目快樂工作简体版

原文原文鏈接

好程序員HTML5培訓教程-css樣式的繼承性、層疊性、優先級
1、css樣式的繼承性:
做用：給父元素設置一些屬性，子元素也可使用
應用場景：
通常用於設置網頁上的一些共性信息，例如網頁的文字顏色，字體，文字大小等內容。優化代碼，下降工做量
注意點：
1.並非全部的屬性均可以繼承，、
只有color/font-/text-/ line開頭的屬性才能繼承；
2.在css的繼承中，不單單是兒子能夠繼承，只要是後代
都能繼承
3.繼承性中的特殊性
3.1 a標籤的文字和顏色和下劃線是不能繼承父元素的——舉例：
複製代碼
<style type="text/css">
div{
color:red
font-size:24px;
text-decoration: none;
}
</style>
<body>css

< div>
      <h1>我是大標題</h1>
      <a  heref="#">我是超連接</a>
       <p>我是段落</p>
   </div>

（上面的代碼，只有p繼承了div設置的屬性，而a標籤是不能繼承父元素的屬性,顏色不會變紅，下劃線也不會被去掉）
複製代碼
3.2 h標籤的文字大小也是不能繼承父元素的(見上面代碼，<h1>標籤中我是大標題不會繼承<div>的 font-size:24px;屬性，因此須要給<h1>單獨寫個css樣式：h1{font-size:24px;}
應用場景：
通常用於設置網頁上的一些共性信息，例如網頁的文字顏色，
字體，文字大小燈內容
格式：
body{屬性：值;}
2、層疊性
好比p標籤，給p標籤設置id和class類名，選擇器上選擇p 和p的id或者class類名，設置相同的屬性，就是層疊性
3、優先級：（三一）
做用：當多個選擇器（好比選擇p標籤和p標籤裏設置的id或者class暱稱），選中同一個標籤，而且給同一個標籤設置相同的屬性時，
如何層疊就優先級來肯定。
2.優先級判斷的三種方式
2.1 是否直接選中，直接選中指的是直接選中要設置css樣式的標籤，和標籤的id或者class類名。（間接選中就是指的是繼承性，好比選擇<ul>那裏面的li繼承ul的屬性，就稱爲繼承屬性）
若是是間接選中，誰離目標標籤比較近就聽誰的。
2.2是不是相同的選擇器。
若是是相同選擇器，那麼就是誰寫在後面就聽誰的。（好比給兩個p標籤設置css樣式
p{color:blue}
p{color:red｝
那麼就會以第二個p爲標準，文字變成紅色
2.3不一樣的選擇器
若是都是直接選中，而且不是相同類型的選擇器，那麼就會按照
選擇器的優先級來層疊
id>類>標籤>通配符>繼承>瀏覽器默認
權重計算
若是選擇器裏有直接選中和間接選中。哪怕是間接的選擇器爲id選擇器，也會優先實行直接選中的效果。
感謝關注好程序員前端教程分享！前端