個人部落格了解一下：obkoro1.com!important 優先順序最高，但也會被權重高的important所覆蓋
行內樣式總會覆蓋外部樣式表的任何樣式(除了!important)
單獨使用乙個選擇器的時候，不能跨等級使css規則生效
如果兩個權重不同的選擇器作用在同一元素上，權重值高的css規則生效
如果兩個相同權重的選擇器作用在同一元素上：以後面出現的選擇器為最後規則.
權重相同時，與元素距離近的選擇器生效
在同乙個元素使用不同的方式，宣告了相同的一條或多條css規則，瀏覽器會通過權重來判斷哪一種方式的宣告，與這個元素最為相關，從而在該元素上應用這個宣告方式宣告的所有css規則。
屬性選擇器指的是:根據元素的屬性及屬性值來選擇元素，比如button的type屬性等。
偽類選擇器: :active :focus等選項.
偽元素選擇器： :before :after!important>行內樣式》id選擇器 > 類選擇器 | 屬性選擇器 | 偽類選擇器 > 元素選擇器不推薦使用!important，因為!important根本沒有結構與上下文可言，並且很多時候權重的問題，就是因為不知道在**定義了乙個!important而導致的。
覆蓋important:
雖然我們應該盡量避免使用!important，但你應該知道如何覆蓋important，加點權重就可以實現，codepen的demo
//!important 優先順序最高，但也會被權重高的important所覆蓋
aaa#a
.a
無論多少個class組成的選擇器，都沒有乙個id選擇器權重高。類似的，無論多少個元素組成的選擇器，都沒有乙個class選擇器權重高、無論多少個id組成的選擇器，都沒有行內樣式權重高。
codepen的demo;
在demo中使用了11個class組成乙個選擇器，最後還是乙個id選擇器，設定的樣式生效。所以權重是在雙方處於同一等級的情況下，才開始對比。
選擇器可能會包含乙個或者多個與權重相關的計算點，若經過權重值計算得到的權重值越大，則認為這個選擇器的權重高。舉乙個簡單的栗子:
.test #test // id 100+class 10=110;
.test #test span{} // id 100+class 10+span 1=111;
.test #test .sonclass{} // id 100+class 10+class 10=120; //生效
#test span
color: red;
}
#content h1避免使用!important;
利用id增加選擇器權重;
減少選擇器的個數（避免層層巢狀）;
個人blogand掘金個人主頁
原文發布時間為：2023年05月21日
掘金
你對CSS權重真的足夠了解嗎？
個人部落格了解一下 obkoro1.com important 優先順序最高，但也會被權重高的important所覆蓋 行內樣式總會覆蓋外部樣式表的任何樣式 除了 important 單獨使用乙個選擇器的時候，不能跨等級使css規則生效 如果兩個權重不同的選擇器作用在同一元素上，權重值高的css規則...
前端深入之css篇 你真的了解「權重」嗎？
權重這個概念，相信對許多進行過前端開發的小夥伴來說肯定並不陌生，有時候乙個樣式新增不上，我們就會乙個 important懟上去，一切就好像迎刃而解了。但還有的時候，important也並不能解決我們的問題，下面請跟隨我來詳細了解一下css的權重吧！指某一因素或指標相對於某一事物的重要程度，其不同於一...
你真的了解嗎 CSS 溢位 浮動 定位
position sticky overflow 屬性用於控制內容溢位元素框時顯示的方式 屬性值描述 visible 預設值。內容不會被修剪，會呈現在元素框之外 hidden 內容會被修剪，並且其餘內容是不可見的 scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便檢視其餘的內容 auto 如果內...