伪类以及伪元素的一些使用小技巧 WEB前端开发_H5之家

你的位置：WEB前端开发 > 表现 > 伪类以及伪元素的一些使用小技巧

伪类以及伪元素的一些使用小技巧

表现练习 3年前 (2013-03-26) 17401浏览 3评论

在浏览器版本越来越高的情况下，很多以前顾及到兼容问题不敢使用的html以及css属性现在已经很普遍的在使用了。比如一些伪类和伪元素。这里稍微提一下在实际工作中用到的一些小技巧，算是笔记。

1.focus，chenked伪类的使用。

其实道理都是一样的，利用chenked或者focus的状态，通过css来定义样式，比如用图片替代checkbox框，原理就是隐藏checkbox之后，通过label操作他的兄弟元素样式。

.checkbox-wrap input:checked + label span{background-position: 0 -20px;}

在input的checked状态下改变span元素的背景图片，来实现模拟效果。

demo如下

提示：你可以先修改部分代码再运行。

2.还有after一个这么强大的伪对象，在以前竟然只是被用作清除浮动，实在是大材小用暴殄天物。看下面这个demo，就是使用after和befor这对好基友，来实现切换标签的current状态小尖角。

提示：你可以先修改部分代码再运行。

原理非常简单，利用border的展示特性制造两个实心尖角，嵌套之后得来一个空心（其实是实心的只是前景色与背景色一样。）

border的这种特性大家以前在做各种页面装饰的时候相信已经很了解了，四条边框的颜色粗细不同组合可以得出各种不同形状。这里只是使用befor和after来体现出来；

nav a.curr::before{border-color:#ccc transparent;border-style:solid; border-width:6px 5px 0px 5px;bottom:-6px; margin-left:-3px; z-index: 1; }

nav a.curr::after{border-color:#fff transparent;border-style:solid; border-width:5px 4px 0px 4px;bottom:-5px; margin-left:-2px; z-index: 2; }

这样两个伪对象的嵌套，刚好得出一个向下的小尖角（其他方向同理，调整border以及定位即可。demo比较粗糙，实际应用的时候需要微调）.

以上只是做个笔记，实际应用中遇到新的技巧我会继续添加。

转载请注明：WEB前端开发 » 伪类以及伪元素的一些使用小技巧

继续浏览有关