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

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

1.focus,chenked伪类的使用。

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

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

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

demo如下

 <!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<style>

*{margin:0;padding:0; font-size:12px;}

a{color:#0E6694; text-decoration:none;}

input{outline: none;}

input[type="text"]{border:#e2e2e2 1px solid;border-radius:4px;color:#2b2b2b;width:200px; height:25px; padding:0 0 0 5px; font-size:12px; margin:0 0 10px 0;}

input[type="text"]:focus{border:#6abeea 1px solid;box-shadow:#6abeea 0 0 3px;}

fieldset{width:300px; margin:30px auto; border: 0;}

legend{color:#666;color: #666666;font-size: 16px;padding: 18px 0 15px;text-shadow: 1px 1px 1px #FFFFFF;}

.checkbox-wrap{color: #999999;}

.checkbox-wrap input{display:none;}

.checkbox-wrap input + label span{background: url("https://www.chengrang.com/wp-content/uploads/2013/03/checkbox-2.png") no-repeat 0 0;cursor:pointer;display: inline-block;width:20px;height:20px;margin: -2px 5px 0 0;vertical-align: middle;}

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

.btn-wrap{padding:10px 0 0 0;}

.btn{width:90px;height:30px; border:#dfdfdf 1px solid; overflow: hidden; display:block; border-radius:4px;}

.btn span{width:89px; height:29px;display:block; line-height: 29px; text-align:center; color:#666; border-top:#fff 1px solid; border-left:#fff 1px solid; background:-webkit-linear-gradient(top,#fbfbfb,#f1f1f1); background:-moz-linear-gradient(top,#fbfbfb,#f1f1f1); }

.btn:hover span{background:-webkit-linear-gradient(top,#f1f1f1,#fbfbfb); background:-moz-linear-gradient(top,#f1f1f1,#fbfbfb);}

</style>

</head>

<body>

<fieldset>

<legend>Demo</legend>

<div class="login-control">

<input type="text" placeholder="账号/手机/邮箱">

<input type="text" placeholder="请输入密码">

</div>

<div class="checkbox-wrap">

<input type="checkbox" id="forget_pw">

<label for="forget_pw"><span></span>记住密码</label>

<a href="#">忘记密码</a>

</div>

<div class="btn-wrap">

<a href="#" class="btn"><span>提交</span></a>

</div>

</fieldset>

</body>

</html>

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

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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<style>

*{margin:0;padding:0; font-size:12px;}

nav{border-bottom:#ccc 1px solid; margin:30px 50px;}

nav a{display:inline-block; width:80px;height:25px;line-height: 25px;text-align:center; color:#333;text-decoration:none; position:relative;}

nav a.curr::before,nav a.curr::after{display:block;content: ""; width:0;height:0; position:absolute;left:50%;}

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; }

</style>

</head>

<body>

<nav>

<a href="#" class="curr">连接</a>

<a href="#">连接</a>

<a href="#">连接</a>

</nav>

</body>

</html>

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

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

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

  1. 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; }
  2. 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比较粗糙,实际应用的时候需要微调).

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Windows Community

Windows 8.1 应用再出发 - 几种常用控件

本篇为大家简单介绍Windows 商店应用中控件的用法,为方便讲解,我们在文本控件和按钮控件这两类中分别挑选有代表性的控件进行详细说明。 1. 文本控件 (1)...

3384
来自专栏熊二哥

Markdown快速入门

现在博文写作次数渐渐变多,经常看到很多园友的博文样式都非常的美观,个人虽然是个土鳖,但对美也是有很强需求的,同时由于最近将要上线一个博客项目,因此也很关心如何可...

2086
来自专栏Java学习123

Eclipse快捷键最有用的快捷键

2607
来自专栏AndroidTv

AndroidTv Home界面实现原理(二)——Leanback 库的主页卡位缩放动画源码解析

上一篇中,我们留了问题,在 Tv Home 界面这种很常见聚焦卡位放大动画效果,我们这一篇就来看看 Leanback 库是怎么实现的。

3486
来自专栏LeoXu的博客

布局和容器 原

563
来自专栏Java后端技术

Javascript中最常用的55个经典技巧(转)

1. oncontextmenu="window.event.returnValue=false" 将彻底屏蔽鼠标右键  <table border oncon...

842
来自专栏跟着阿笨一起玩NET

jQuery的编码标准和最佳实践

不知道在哪里看到了这篇关于jQuery编码的文章,挺实用的,恰好最近在研究jQuery的基础知识,今天打开收藏夹来翻译一下,原文的英语不难,但是内容很实用,可能...

492
来自专栏Golang语言社区

JavaScript Window - 浏览器对象模型

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”。 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Mod...

3693
来自专栏守候书阁

也许vue+css3做交互特效更简单

做项目就难免会开发交互效果或者特效,而我最近开发的项目一直在使用vue,开发技术栈方面,理所当然就使用了vue+css3开发,过程中发现使用vue+css3开发...

752
来自专栏狂码一生

利用ajaxFileUpload.js实现多文件异步上传功能

  AjaxFileUpload.js是网络开发者写好的插件放出来供大家使用用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值。在这里我将网络...

44513

扫码关注云+社区