首页 > 代码库 > css选择器顺序的小技巧

css选择器顺序的小技巧

在线演示

本地下载

css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了。

这里的演示是一个带有hover事件的四张照片,效果来自一个国外优秀单页,我在recode的时候做的,看源码他应该是用的js,我这里改成了css做,正好可以演示一下css选择器的顺序技巧。

首先是li标签的样式,这里就不说了,主要说一下hover的操作。

显示ul的hover,让所有的li标签缩短宽度。

.......

原文来自:css选择器顺序的小技巧

css选择器顺序的小技巧