好程式設計師HTML5培訓教程-css樣式的繼承性、層疊性 、優先順序

好程式設計師發表於2019-03-25
程式設計師HTMLCSS繼承

好程式設計師 HTML5 培訓教程 -css 樣式的繼承性、層疊性 、優先順序
一、 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>

     < 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{ 屬性：值 ;}

二、層疊性
比如 p 標籤，給 p 標籤設定 id 和 class 類名，選擇器上選擇 p 和 p 的 id 或者 class 類名，設定相同的屬性，就是層疊性

三、優先順序：（三一）
作用：當多個選擇器（比如選擇 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 選擇器，也會優先實行直接選中的效果。

感謝關注 好程式設計師 前端教程分享！


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69913864/viewspace-2639259/，如需轉載，請註明出處，否則將追究法律責任。

相關文章