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

在浏览器版本越来越高的情况下,很多以前顾及到兼容问题不敢使用的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 条评论
登录 后参与评论

相关文章

来自专栏向治洪

React Native之ViewPagerAndroid 组件

概述 今天我们来讲解一下关于 ViewPager 的使用,它是一个允许子视图左右滚动翻页的容器。我们知道在Android开发中系统有ViewPager这个组件,...

1828
来自专栏对角另一面

谷歌插件Image downloader开发之popup

Image downloader的交互逻辑是这样的:用户点击Image downloader的图标,会向页面(content script,见上一篇文章:谷歌插...

1940
来自专栏代码GG之家

SDL系列讲解(十) 按键处理流程

SDL系列讲解(一) 简介 SDL系列讲解(二) 环境搭建 SDL系列讲解(三) 工具安装 SDL是什么,能干什么,为什么我们要学习它? SDL系列讲解(四)...

1948
来自专栏韩东吉的Unity杂货铺

零基础入门 14: UGUI 打字机效果实现

如上图,效果大概就是这样,有一段文字,和音频,文字要这种显示效果,并且在文字出现的时候,要有背景键盘音效的声音,来模拟打字机的效果。最好还可以调整文字的出现速度...

972
来自专栏Google Dart

AngularDart Material Design 记分卡 顶

(adsbygoogle = window.adsbygoogle || []).push({}); fun...

1054
来自专栏hightopo

基于 HTML5 的 3D 工控隧道案例

992
来自专栏salesforce零基础学习

salesforce 零基础学习(二十六)自定义图表chart简单介绍(使用apex和VF实现)

chart在报表中经常使用到,他可以使报表结果更加直观的展现给用户。salesforce支持VF和apex代码来更好的展示chart。 chart分类:常用的图...

1788
来自专栏游戏杂谈

Flex + XML的图片轮显

逻辑部分与JavaScript有些类似,在解析XML时,单独写了一个as类来处理,btn的外观使用了CSS进行控制,资源全部放在名为assets文件夹目录下,工...

461
来自专栏林德熙的博客

WPF 一个性能比较好的 gif 解析库

本文介绍 Magick.NET ,这是 ImageMagick 的 .Net 封装,他支持 100 多种格式的图片,而 gif 也是他支持的。本文告诉大家如何使...

942
来自专栏Coding01

推荐一款快速生成海报的微信小插件

现在很多小程序都有生成海报,分享海报的功能。我们自己的几个小程序 (如:爸妈搜商城、爸妈搜云课堂、幼师大学、跟着外教学英语等) 也都有生成海报的功能。因此技术团...

1723

扫码关注云+社区