??屬性值的計算過程（怎么確定的）

元素的每一個css屬性，一定會根據(jù)下述優(yōu)先級，尋找聲明值：

作者樣式表 > 對沖突屬性值進行權(quán)重計算 > 繼承樣式表 > 默認(rèn)樣式表


??沖突屬性值的權(quán)重計算規(guī)則

元素css屬性優(yōu)先級，都是根據(jù)下述規(guī)則進行權(quán)重總計的：

1. 比較重要性：important > 作者樣式 > 默認(rèn)樣式；

2. 比較特殊性：內(nèi)聯(lián) style > #id > .class > 元素標(biāo)簽 > *；

3. 比較次序：靠后的樣式優(yōu)先；

??元素不再根據(jù)"行內(nèi)"、"塊"進行區(qū)分

而是表達(dá)為：元素的css display屬性為塊盒 block 和行盒 inline；


??常用的選擇器

• div span 匹配所有位于任意 <div> 元素之內(nèi)的 <span> 元素；

• ul > li 匹配直接嵌套在 <ul> 元素內(nèi)的所有 <li> 元素。直接子代選擇器；

• p ~ span 匹配同一父元素下，<p> 元素后的所有 <span> 元素。兄弟選擇器；

• h2 + p 會匹配緊鄰在 h2 元素后的第一個 <p> 元素；直接兄弟選擇器；

• 偽類：button :active 點擊中的按鈕

• 偽元素：button :: content 按鈕中的額外內(nèi)容
  

??特殊的 css 值

initial：主動將某一css屬性設(shè)為默認(rèn)值

unset：清除瀏覽器默認(rèn)樣式(全部清除all:unset)

revert：恢復(fù)瀏覽器默認(rèn)樣式

??使用 css 變量

:root { --font: 16px; }
{ font-size: var(--font) }
{ font-size: calc( var(--font) * 2 ) }

??使用 clip-path 對元素進行任意形狀的裁剪

??使用 box-decoration-break: clone 保持對行盒的截斷樣式

??使用 filter 修改元素中的邊緣像素點

毛玻璃：backdrop-filter: blur()