最近在开发我的两个新网站的过程中摸索学习到两个CSS非常有用但鲜为人知的技巧，在此分享记录一下。
一、伪类“:hover”的另类用法
伪类“:hover”的官方解释是：选择鼠标指针浮动在其上的元素，并设置其样式。一般常用场景为设置元素当鼠标经过时改变样式，比如我们要实现当鼠标浮动到链接时改变链接的文字颜色，则可以添加样式“a:hover:color:#222”，但是我在开发网站的过程中发现，这个样式还可以通过特殊写法用来改变子元素的状态，比如我可以这样写：.diva:hover.divb:color:#222，这个写法的样式效果是当鼠标经过diva时，divb的文字颜色发生改变（其中divb必须是diva的子元素此样式才会产生效果），得知这个特性后在某些应用场景非常实用，比如我可以用这个样式来实现当鼠标经过时显示某些内容，这可以在不依靠JS的情况下用来做导航的二级菜单或者展示二维码。
二、元素两端对齐
之所以说是元素两端对齐，是因为这个方法不是针对文字段落的两端对齐而是针对元素的，比如在一个盒子模型中有若干元素，用文字两端对齐的样式是无法实现盒子内部元素两端对齐效果的，这时候给盒子添加样式“display:flex;justify-content:space-between”（经过测试，这两个属性无需考虑兼容性，在主流浏览器中标准写法是被支持的）即可轻易实现两端对齐的效果。
以上两个技巧，我称之为高级技巧，是因为在之前我并没有掌握，而当我发现了以后觉得非常实用与神奇，如果你还有其它CSS相关的使用技巧，欢迎一起交流。
网友评论