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

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

相关文章

来自专栏我和未来有约会

Silverlight第三方控件专题

这里我收集整理了目前网上silverlight第三方控件的专题,若果有所遗漏请告知我一下。 名称 简介 截图 telerik 商 RadC...

4885
来自专栏魂祭心

原 canvas绘制clock

5904
来自专栏转载gongluck的CSDN博客

cocos2dx 打灰机

#include "GamePlane.h" #include "PlaneSprite.h" #include "BulletNode.h" #include...

8976
来自专栏pangguoming

Spring Boot集成JasperReports生成PDF文档

由于工作需要,要实现后端根据模板动态填充数据生成PDF文档,通过技术选型,使用Ireport5.6来设计模板,结合JasperReports5.6工具库来调用渲...

1.6K7
来自专栏陈仁松博客

ASP.NET Core 'Microsoft.Win32.Registry' 错误修复

今天在发布Asp.net Core应用到Azure的时候出现错误InvalidOperationException: Cannot find compilati...

5598
来自专栏落花落雨不落叶

canvas画简单电路图

1.1K12
来自专栏Golang语言社区

【Golang语言社区】GO1.9 map并发安全测试

var m sync.Map //全局 func maintest() { // 第一个 YongHuomap := make(map[st...

6418
来自专栏C#

DotNet加密方式解析--非对称加密

    新年新气象,也希望新年可以挣大钱。不管今年年底会不会跟去年一样,满怀抱负却又壮志未酬。(不过没事,我已为各位卜上一卦,卦象显示各位都能挣钱...)...

6708
来自专栏杨龙飞前端

scrollto 到指定位置

3435
来自专栏菩提树下的杨过

Flash/Flex学习笔记(23):运动学原理

先写一个公用的小球类Ball: package{ import flash.display.Sprite; //小球 类 public class B...

28610

扫码关注云+社区