理解css屬性的繼承和覆蓋

首先，咱們梳理一下哪些屬性會被繼承

 

• 文本

 

• • color 顏色，a元素除外
  • direction 方向
  • font 字體
  • font-family 字體系列
  • font-style 字體風格
  • font-size 字體大小
  • font-weight 字體粗細
  • letter-spacing 字母間距
  • line-height 行高
  • text-align 對齊方式
  • text-indent 首行縮進量
  • text-transform 大小寫修改
  • visibility 可見性
  • white-space 指定如何處理表格
  • word-spacing 字符間距

• 列表

  • list-style 列表樣式
  • list-style-image 列表指定樣式圖片
  • list-style-position 列表標記的位置
  • list-style-type 列表標記的樣式

• 表格

  • border-collapse 控制單元格內邊距是否存在
  • border-spacing 指定表格邊距之間的空隙大小
  • caption-siede 指定表格標題的位置
  • empty-cells 指定是否顯示i表格中的空單元格

• 頁面設置

  • orphans 指定當元素內部發生分頁時在頁面底部須要保留的最小行數
  • page-break-inside 設置元素內部的分頁形式
  • windows 設置當元素內部發生分頁是在頁面頂部須要保留的最少行數

• 其餘

  • cursor 鼠標指針
  • quotes 指定引號樣式

而後咱們討論一下，當規則發生衝突時：如何處理‘層疊’問題

• 先考慮選擇器優先級

  • 標籤選擇器1
  • 類選擇器10
  • id選擇器100
  • 複合選擇器以最後的部分爲主

• 再尋找是否存在'! important'

　　若是爲了不其餘屬性的覆蓋和影響，能夠聲明一條特殊的規則來覆蓋一切，具體方法是這樣的：如 p{ color：orange !important;}這樣 這個屬性將凌駕於一切而在頁面上顯示出來。