最近在開發我的兩個新網站的過程中摸索學習到兩個CSS非常有用但鮮為人知的技巧，在此分享記錄一下。
一、偽類“:hover”的另類用法
偽類“:hover”的官方解釋是：選擇鼠標指針浮動在其上的元素，並設置其樣式。一般常用場景為設置元素當鼠標經過時改變樣式，比如我們要實現當鼠標浮動到鏈接時改變鏈接的文字顏色，則可以添加樣式“a:hover:color:#222”，但是我在開發網站的過程中發現，這個樣式還可以通過特殊寫法用來改變子元素的狀態，比如我可以這樣寫：.diva:hover.divb:color:#222，這個寫法的樣式效果是當鼠標經過diva時，divb的文字顏色發生改變（其中divb必須是diva的子元素此樣式才會產生效果），得知這個特性後在某些應用場景非常實用，比如我可以用這個樣式來實現當鼠標經過時顯示某些內容，這可以在不依靠JS的情況下用來做導航的二級菜單或者展示二維碼。
二、元素兩端對齊
之所以說是元素兩端對齊，是因為這個方法不是針對文字段落的兩端對齊而是針對元素的，比如在一個盒子模型中有若干元素，用文字兩端對齊的樣式是無法實現盒子內部元素兩端對齊效果的，這時候給盒子添加樣式“display:flex;justify-content:space-between”（經過測試，這兩個屬性無需考慮兼容性，在主流瀏覽器中標準寫法是被支持的）即可輕易實現兩端對齊的效果。
以上兩個技巧，我稱之為高級技巧，是因為在之前我並沒有掌握，而當我發現了以後覺得非常實用與神奇，如果你還有其它CSS相關的使用技巧，歡迎一起交流。
分享到:
