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選擇器,也會優先實行直接選中的效果


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM