CSS三種特性

繼承性

• 做用：給父元素設置一些屬性，子元素也可使用，這個咱們就稱之爲繼承性
• 示例代碼：

<style>
     div {
     color: red;
     }
</style>
<div>
    <ul>
        <li>
            <p>我是段落</p>
        </li>
    </ul>
</div>

<!--p會變成紅色-->

• 注意點：
  • 並非全部的屬性均可以繼承，只有以color、font-、text-、line-開頭的屬性才能夠繼承
  • 在CSS的繼承中不單單是兒子能夠繼承，只要是後代均可以繼承
• 繼承性中的特殊性
  • a標籤的文字顏色和下劃線是不能繼承的
  • h標籤的文字大小是不能繼承的

<style>
    div {
        color: red;
        text-decoration: none;
        font-size: 30px;
    }
</style>
<div>
    <a href="#">我是超連接</a>
</div>

<div>
    <h1>我是大標題</h1>
</div>

<!--a的顏色和下劃線不會發生變化, H的字體大小不對  -->

• 應用場景：
  • 通常用於設置網頁上的一些共性信息，例如網頁的文字顏色、字體、文字大小等內容

body {
    font-size: 30px;
    font-family: "微軟雅黑"
    color: #666;
}

層疊性

• CSS全稱 Cascading StyleSheet（層疊式樣式表），其中的層疊就是指層疊性
• 做用：層疊性就是CSS處理衝突的一種能力
• 示例代碼

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

<!-- 最終顯示藍色, 由於紅色被覆蓋掉了 -->

• 注意點：
  • 層疊性只有在多個選擇器選中「同一個標籤」，而後又設置了「相同的屬性」，纔會發生層疊性

優先級

• 做用：當多個選擇器選中同一個標籤，而且給同一個標籤設置相同的屬性時，如何層疊就由優先級來肯定

• 優先級判斷的三種方式

  • 間接選中就是指繼承
  • 若是是間接選中, 那麼就是誰離目標標籤比較近就聽誰的

  <style>
      li {
          color: blue;
    }
      ul {
          color: red;
      }
  </style>
  <ul>
      <li>
          <p id="identity" class="para">我是段落</p>
      </li>
  </ul>
  <!-- 最終顯示藍色 -->

  • 相同選擇器(直接選中)
  • 若是都是直接選中, 而且都是同類型的選擇器, 那麼就是誰寫在後面就聽誰的

  <style>
      p {
        color: blue;
      }
      p {
        color: red;
      }
  </style>
  <ul>
      <li>
          <p id="identity" class="para">我是段落</p>
      </li>
  </ul>
  <!-- 最終顯示紅色 -->

  • 不一樣選擇器(直接選中)
  • 若是都是直接選中，而且不是相同類型的選擇器，那麼就會按照選擇器的優先級來層疊
  • id > 類 > 標籤 > 通配符 > 繼承 > 瀏覽器默認

<style>
    #identity {
        color: purple;
    }
    .para {
        color: pink;
    }
    p {
        color: green;
    }
    * {
        color: blue;
    }
    li {
        color: red;
    }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最終顯示紫色 -->

• 注意點：
  • 通配符選擇器也是直接選中

優先級權重

• 做用：當多個選擇器混合在一塊兒使用時, 咱們能夠經過計算權重來判斷誰的優先級最高
• 權重的計算規則
  • 首先先計算選擇器中有多少個id，id多的選擇器優先級最高
  • 若是id的個數同樣，那麼再看類名的個數，類名個數多的優先級最高
  • 若是類名的個數同樣，那麼再看標籤名稱的個數，標籤名稱個數多的優先級最高
  • 若是id個數同樣，類名個數也同樣，標籤名稱個數也同樣，那麼就不會繼續往下計算了，那麼此時誰寫在後面聽誰的
• 示例代碼

<style>
    #identity1 .box2 {
        color: red;
    }
    .box1 .box2 {
        color: green;
    }
    div ul li p {
        color: blue;
    }
</style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id多最終顯示紅色 -->
<style>
    .box1 .box2 {
        color: blue;
    }
    div .box2 {
        color: green;
    }
</style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id同樣, 比類多, 最終顯示藍色 -->
<style>
    #identity1 ul li p {
        color: red;
    }
    #identity1 ul p {
        color: green;
    }
</style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id同樣, 類同樣, 比標籤多最終顯示紅色 -->
<style>
    .box1 li #identity2{
        color: blue;
    }

    #identity1 ul .box2{
        color: red;
    }
</style>
<div id="identity1" class="box1">
    <ul>
        <li>
            <p id="identity2" class="box2">我是段落</p>
        </li>
    </ul>
</div>
<!-- id同樣, 類同樣, 標籤同樣, 最終顯示紅色 -->

• 注意點:
  • 只有選擇器是直接選中標籤的才須要計算權重, 不然必定會聽直接選中的選擇器的

!important

• 做用：用於提高某個直接選中標籤的選擇器中的某個屬性的優先級的，能夠將被指定的屬性的優先級提高爲最高
• 示例代碼

<style>
    #identity {
        color: purple;
        font-size: 50px;
    }
    .para {
        color: pink ;
    }
    p {
        color: green !important;
    }
</style>
<ul>
    <li>
        <p id="identity" class="para">我是段落</p>
    </li>
</ul>
<!-- 最終顯示綠色 -->

• 注意點：
  • !important只能用於直接選中，不能用於間接選中
  • 通配符選擇器選中的標籤也是直接選中的
  • !important只能提高被指定的屬性的優先級，其它的屬性的優先級不會被提高
  • !important必須寫在屬性值得分號前面
  • !important前面的感嘆號不能省略