? 先上總結: a. 說明: i. 公式: (行內, Id, 類, 標簽) ii. 規則: 從左至右依次做個數上的比較, 如果同級數量一致, 則比較下一級個數, 直到某一級數量不一致, 則數量較大的一方選擇器的優先級較高, 后面的數量就無需比較了， 如選擇器1 (0, 0, 1, 0), 選擇器2 (0, 0, 0, 3), 那么選擇器1的優先級高于選擇器2，如果所有的數值都一致的話, 說明兩選擇器相同, 那就依據css層疊性的特點. 瀏覽器會選擇后一個選擇器 b. 備注: i. 權重疊加計算不是正常的加法計算, 不需要逢十進一， 如標簽是11 類是0 那么只可以是 (0, 0, 0 , 11), 不能是(0, 0, 1, 1) ii. * 通配符沒有權重 iii. 無論父標簽用了什么選擇器并設定了什么樣式, 對子標簽來說都是繼承, 繼承的優先級永遠是最低的， ? 準備: 先添加一段html代碼
這是一個段落
之后為了能更好地查看結果, 設定點字體樣式, 由于咱代碼簡單, 就使用一個通配符選擇器設定樣式 * { font-family: 楷體; font-size: 60px; } ? 代碼示例說明: 1. 同級數量的比較 a. 先寫一個p標簽選擇器, 運行一下效果 /* （0, 0, 0, 1） */ p { color: blue; } b. 再寫一個后代選擇器如下, 再運行一下效果 /* (0, 0, 0, 2) */ div p { color: aqua; }由于后者標簽數量高于前者標簽數量, 所以后者選擇器高 建議: 可以把b步驟的代碼放在a步驟的前面 ,這樣可以更好地體現優先級的關系(優先級是沒有層疊性的特點), 可以更好地排除層疊性的可能(雖然根本就沒這可能, 只是方便理解), 以下示例皆是如此 2. 不同級別的比較 a. 設計一個類構造器 /* (0, 0, 1, 0) */ .son { color: darkslategray; } b. 在p標簽上加上類選擇器這是一個段落
由于類級別比標簽高, 所以.son 選擇器的優先級別高于div p選擇器 3. 統配符沒有權重的問題 首先優先級是沒有層疊性的特點的, 這個在建議中也有描述， 其次咱可以假設它具備權重, 那樣的話它就不會有層疊行的效果 a. 先寫一個p標簽選擇器, 樣式和之前的一樣 p { color: blue; } b. 之后在它的后面寫一個* p選擇器 * p { color: yellowgreen; } 查看效果是文字的顏色是yellowgreen， c. 接下來把* p選擇器的代碼放在p選擇器之上， 再運行 這時候會發現字體顏色由原來的yellowgreen變為了blue，這就說明它并沒有體現優先級, 而是體現出了層疊性的效果, 所以說通配符在權重疊加計算中沒有任何權重 ? 示例代碼: 以下是我的實體代碼, 請參考這是一個段落
? 備注: 頭回寫博客,如有寫的不好或是有問題, 還請多多指教多多擔待, 如有問題或是建議, 歡迎評論區里留言轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/541519.html
標籤：Html/Css