IT知识库 购物 网址 游戏 小说 歌词 快照 开发 股票 美女 新闻 笑话 | 汉字 软件 日历 阅读 下载 图书馆 编程 China
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> :before 和 :after 的内幕 以及伪类 ( 转 ) -> 正文阅读

[Html-Css]:before 和 :after 的内幕 以及伪类 ( 转 )

:before 和 :after 的内幕 以及伪类 ( 转 ) 原文链接    http://www.cnblogs.com/zhujl/archive/2012/05/08/2489411.html
------------------------------------------------------------------------------------------------------------------------------------

伪类 VS 伪元素

这两个概念很容易混淆,即使你Google或者查W3C的资料都不一定搞得清。答案其实很简单,如下:
伪类:作用对象是整个元素
首先,来看几个伪类

a:link {color: #111}
a:hover {color: #222}
div:first-child {color: #333}
div:nth-child(3) {color: #444}

如你所见,尽管这些条件不是基于DOM的,但结果每一个都是作用于一个完整的元素,比如整个链接,段落,div等等。
伪元素:作用于元素的一部分
还是来看几个例子:

p::first-line {color: #555}
p::first-letter {color: #666}
a::before {content : "hello world";}

如你所见,伪元素作用于元素的一部分:一个段落的第一行 或者 第一个字母。
更加神奇的是可以作用于并未加入HTML的对象,这就是:before 和 :after,也就是本文要说的内容。
:before VS ::before

为什么有两种写法呢?它们的效果一样么?
答案是一样的,来看一个例子:

/*CSS2*/
.example:before {}
.example:after {}
.example:first-child {}
  
/*CSS3*/
.example::before {}
.example::after {}
.example::first-child {}

在CSS2中,我们使用一个冒号表示伪类和伪元素。然而,为了区别已有的这两个,CSS3专门为伪元素设计了两个冒号。
IE再次毁了一切
所有现代浏览器都支持 :: 语法,但是悲剧的IE8不支持,大多数开发者为了兼容IE,使用CSS2的 :。为了保持简单一致,本文后面的部分都是用CSS2格式。
什么是 :before 和 :after

:before 和 :after 使你可以通过CSS加入一些内容,从而避免了HTML的凌乱。特别是一些装饰性的元素,从语义化考虑本就不该出现在HTML中。
举个例子,你的网站有一些电话号码,你希望在它们前面加一个icon ?。你可以用 :before 伪元素实现这个效果:

.phoneNumber:before {
    content: "?";
    font-size: 15px;
}

 这段代码使得.phoneNumber的所有元素的前面插入了一个icon。:after 作用一样,你可以猜到会出现什么效果了

.phoneNumber:after {
    content: "$#9742";
    font-size: 15px;
}

一个简洁的例子

最近,:before 和 :after 变得非常流行的一个原因是它们可以增加纯CSS设计的复杂度。不需要多余的标签,我们可以使用伪元素添加额外的可样式化的元素或层级。
来看一个例子,这是一个简单的按钮,圆形并有红色的渐变。
.button {
    height: 100px;
    width: 100px;
    position: relative;
    margin: 50px;
    color: white;
    text-align: center;
    line-height: 100px;
    /*Rounded Corners and Shadows*/
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    box-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    /*Ridiculous Gradient Syntax*/
    background: #e51d16; /* Old browsers */
    background: -moz-linear-gradient(top,  #e51d16 0%, #b21203 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e51d16), color-stop(100%,#b21203)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #e51d16 0%,#b21203 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #e51d16 0%,#b21203 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #e51d16 0%,#b21203 100%); /* IE10+ */
    background: linear-gradient(top,  #e51d16 0%,#b21203 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e51d16', endColorstr='#b21203',GradientType=0 ); /* IE6-9 */
}
效果如下:

现在,我们需要在按钮的外围添加一层稍暗的区域,并且给它一个内阴影效果,看起来就像是嵌入的一样。这次,我们不用添加额外的标签,只需要用一个空的伪元素。

.button:before {
    content:"";
}

现在我们开始实现想要的效果。

.button:before {
    content:"";
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    position: relative;
    padding: 15px;
    background: #ddd;
    left: -15px;
    top: -15px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

现在按钮看起来更立体了。 :before 实现了外围的圆环。我们把z-index设置为-1,使它位于按钮的下方,并且使用相对定位校正位置。
接下来,我们又想加一层同样的效果。这一次,我们使用 :after

.button:after {
    content:"";
    width: 100%;
    height: 100%;
    display: block;
    z-index: -2;
    position: relative;
    padding: 25px;
    background: #eee;
    position: absolute;
    left: -25px;
    top: -25px;
    -webkit-border-radius: 100px;
    -moz-border-radius: 100px;
    border-radius: 100px;
    -webkit-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
    -moz-box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
    box-shadow: inset 2px 2px 4px rgba(0,0,0,0.4);
}

效果如下: 

通过 :before 和 :after 你还能做什么?
使用很广泛,下面给出几个比较流行的例子
清除浮动
CSS的浮动很让人头痛,世界各地的开发者都在寻找更好的解决方法。
Nicolas Gallagher 提出的方法也许是当今最受欢迎的一个,即利用 :before 和 :after 清除浮动。

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}
  
.cf:after {
    clear:both;
}
  
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

这里 :before 阻止了 top-margin 合并, :after则用于清除浮动,这种方法做的极为干净漂亮。
你也许会说还有 overflow: hidden; 方式呢!当然这也是一种可选方案,当你发现overflow不合适的时候,可以选择这里提到的方式。
CSS图形

使用纯CSS实现某些复杂的图形是不是很有趣?通过巧妙的操作 border 和 一些伪元素就可以实现这些图形。
CSS3Shapes.com 有很多例子,这里就举一个八边形的例子。

#octagon {
   width: 100px;
   height: 100px;
   background: blue;
}
  
#octagon:before {
   height: 0;
   width: 40px;
   content:"";
   position: absolute;
   border-bottom: 30px solid blue;
   border-left: 30px solid white;
   border-right: 30px solid white; 
}
  
#octagon:after {
   height: 0;
   width: 40px;
   content:"";
   position: absolute;
   border-top: 30px solid blue;
   border-left: 30px solid white;  
   border-right: 30px solid white; 
   margin: 70px 0 0 0;
}

可以看到,通过定位、设置border,我们就能把一些简单的形状组合成复杂的图形,相当的酷!
上一篇文章      下一篇文章      查看所有文章
加:2015-07-06 15:09:23  更:2017-05-16 04:47:27 
 
  Html-Css 最新文章
近期前端中的 一些常见的面试题
近期前端中的 一些常见的面试题
localStorage使用总结
前端
图文详解前端CSS中的Grid布局,你真的可以5
CSS3 按钮特效(一)
HTML
ionic APP二维码插件 地址
为什么在CSS中不要再使用@import
CSS 笔记
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 软件开发资料 文字转语音 购物精选 软件下载 新闻资讯 小游戏 Chinese Culture 股票 三丰软件 开发 中国文化 网文精选 阅读网 看图 日历 万年历 2018年12日历
2018-12-17 16:31:13
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库