首頁 > 文章 > web前端 > 你必須要知道的CSS三大特性

你必須要知道的CSS三大特性

php中世界最好的语言原創: 2018-03-13 10:32:002394瀏覽

這次帶給大家你必須要知道的CSS三大特性，使用CSS三大特性的注意事項有哪些，以下就是實戰案例，一起來看一下。

CSS三大特性: 繼承,層疊,優先權

一.繼承性

1.什麼是繼承性?

作用: 給父元素設定一些屬性, 子元素也可以使用, 這個我們就稱之為繼承性

注意點:

1.並不是所有的屬性都可以繼承, 只有以7f1061d8af4476e52b26c1e6fb66f734開頭的屬性才可以繼承

2.在CSS的繼承中不僅僅是兒子可以繼承, 只要是後代都可以繼承

3.8e99a69fbe029cd4e2b854e244eab143繼承性中的特殊性128dba7a3a77be0113eb0bea6ea0a5d0

3.1 a標籤的文字顏色和底線是不能繼承的(8e99a69fbe029cd4e2b854e244eab143也就是說不能透過繼承獲得128dba7a3a77be0113eb0bea6ea0a5d0)

3.2 h標籤的文字大小是不能繼承的(8e99a69fbe029cd4e2b854e244eab143也就是說不能透過繼承獲得128dba7a3a77be0113eb0bea6ea0a5d0)

#應用場景:

一般用來設定網頁上的一些共通性資訊, 例如網頁的文字顏色, 字型,文字大小等內容;
body{} >>> 一般在body裡面設定共通性資訊

二. 層疊性

1.什麼是層疊性?

作用: 層疊性就是CSS處理衝突的一種能力

注意點:

層疊性只有在多個選擇器選取"同一個標籤", 然後又設定了"相同的屬性", 才會發生層疊性

CSS全名為Cascading StyleSheet (層疊樣式表)

列如:

<style>
        p{            color: red;
        }        .para{            color: blue;
        } </style>
 <p id="identity" class="para">我是段落</p>

三.優先權

#1.什麼是優先權?

作用:當多個選擇器選取同一個標籤, 並且給同一個標籤設定相同的屬性時, 如何層疊就由優先權來決定

#2.優先權判斷的三種方式

2.1間接選取就是指繼承
如果是間接選取, 那麼就是誰離目標標籤比較近就聽誰的

2.2相同選擇器(直接選取)
如果都是直接選取, 並且都是同類型的選擇器,那麼是誰寫在後面就聽誰的

2.3不同選擇器(直接選中)
如果都是直接選中, 並且不是相同類型的選擇器, 那麼就會按照選擇器的優先級來層疊:

id>類別>標籤>通配符>繼承>瀏覽器預設

id>類別>標>通>繼>4

##四. !important

1.什麼是!important

作用: 用於提升某個直接選中標籤的選擇器中的某個屬性的優先級的, 可以將被指定的屬性的優先權提升為最高

注意點:

1.!important只能用於直接選取, 8e99a69fbe029cd4e2b854e244eab143不能用於間接選取128dba7a3a77be0113eb0bea6ea0a5d0

2.通配符選擇器選取的標籤也是直接選取的,也可以用!important提升優先權

3.!important只能提升被指定的屬性的優先權, 其它的屬性的優先權不會被提升

4.!important必須寫在屬性值得分號前面

5.!important前面的感嘆號不能省略

 <style>
      p{
         color: red !important; //提升优先级到最高
         font-size: 30px; //不会提升优先级(说明了上面的第3点)
       }  </style>

五.優先權的權重

1.什麼是優先權的權重?

作用: 當多個選擇器混合在一起使用時, 我們可以透過計算權重來判斷誰的優先權最高

2.權重的計算規則

2.1首先計算選擇器中有多少個id, id多的選擇器優先權最高

2.2如果id的個數一樣, 那麼再看類別名稱的個數, 類別名稱個數多的優先權最高

2.3如果類別名稱的個數一樣, 那麼再看標籤名稱的個數, 標籤名稱個數多的優先權最高

2.4如果id個數一樣, 類別名稱個數也一樣, 標籤名稱個數也一樣, 那麼就不會繼續往下計算了, 那麼此時誰寫在後面聽誰的
也就是說優先順序如果一樣, 那麼誰寫在後面聽誰的

注意點:

1). 只有選擇器是直接選取標籤的才需要計算權重, 否則一定會聽直接選中的選擇器的;

2). 通配符的權重為0

#相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！