--- tags: CSS --- # CSS 額外補充 # 特性-繼承性 母標籤的css屬性會直接套用到子標籤 可以繼承的常見屬性(文字控制屬性都可以繼承) 1.color 2.font-style、font-weight、font-size、font-family 3.text-indent、text-align 4.line-height 5.更多 繼承失敗的常見屬性 1.a標籤的color 2.h系列標籤的font-size 應用方法 直接在body標籤設置font和color 如果網站中有少數特別的文字 可利用層疊性的特性到個別標籤再寫一次font和color # 特性-層疊性 連續寫相同屬性，後面的會覆蓋前面的 必須在選擇器優先級相同時才會判斷層疊性 :::danger 待補充 ::: # 優先級 !important>行內樣式>id選擇器>類選擇器>標籤選擇器>通配符選擇器>繼承 行內樣式就是引入方式三:行內式 1. 2.!important不能提升繼承的優先級 3.上班不建議使用!important ``` div{ color:green !important; } ``` ## 優先級-疊加計算 在復合選擇器中必須由判斷權重決定哪個選擇器生效 (行內樣式個數,id選擇器個數,類選擇器個數,標籤選擇器個數) 先說如果是繼承的，權重就是最低 判斷方法看範例 !important不是用在繼承就一定會權重最高 ``` /*(0,1,0,1)*/ div #one{ color:orange; } /*(0,0,2,0)*/ .father .son{ color:skyblue; } /*(0,0,1,1)*/ .father p{ color:purple; } /*(0,0,0,2)*/ div p{ color:pink; } 先判斷行內樣式個數都是0 往下一級看 再判斷id選擇器個數orange是1其它是0 判斷完成orange數量最多 不用再往下一級了 color:orange;生效 ``` 如果只有兩個繼承的話 先判斷父級>爺級 再判斷優先級 最終看層疊性 ### 用chrome找錯 1.在網頁空白處點滑鼠右鍵再點檢查 2.按F12 在element頁籤裡有html程式碼 點一個標籤會出現該標籤的style(在右邊) 錯誤可能有 Q:相同的屬性重複寫或是寫好的程式碼被註釋掉 A:找錯畫面上會出現刪除線 Q:忘記寫冒號或是分號之類的 A:找錯畫面會直接出現三角形黃色驚嘆號 測試調整 在style的寬度或高度屬性 點數字的部分後再按鍵盤的↑或↓可進行即時微調 另外也能直接在chrome打程式碼測試 ### 範例一 ``` <style> .fahter .son .sun { color:blue; } </style> ``` ``` <body> <div class="father"> <div class="son"> <div class="sun">孫子</div> </div> </div> </body> ``` chrome報錯:無 提示:選擇器單字拼錯 ### 範例二 ``` <style> .father .son .sun div { color:blue; } </style> ``` ``` <body> <div class="father"> <div class="son"> <div class="sun">孫子</div> </div> </div> </body> ``` chrome報錯:無 提示:選擇器多寫，導致沒選中 ### 範例三 ``` <style> } .father .son .sun { color:blue; } </style> ``` ``` <body> <div class="father"> <div class="son"> <div class="sun">孫子</div> </div> </div> </body> ``` chrome報錯:無 提示:多寫一個沒意義符號 ### 範例四 ``` <style> .father .son .sun { color:red font-size:20px; } </style> ``` ``` <body> <div class="father"> <div class="son"> <div class="sun">孫子</div> </div> </div> </body> ``` chrome報錯:黃色三角形 提示:少寫一個關鍵符號 ### 範例五 ``` <style> .father .son .sun { color：red; font-size:20px; } </style> ``` ``` <body> <div class="father"> <div class="son"> <div class="sun">孫子</div> </div> </div> </body> ``` chrome報錯:黃色三角形 提示:關鍵符號大小寫錯誤