论坛首页 Web前端技术论坛

css选择器顺序的小技巧

浏览 1346 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2014-10-28  

在线演示

本地下载

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

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

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

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

.......

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

论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics