编程知识 购物 网址 新闻 笑话 | 软件 日历 阅读 图书馆 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教程 经验交流
站长资讯 .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
   -> Html-Css -> :before 和 :after 的内幕 以及伪类 ( 转 ) -> 正文阅读

[Html-Css]: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,我们就能把一些简单的形状组合成复杂的图形,相当的酷!
  Html-Css 最新文章
近期前端中的 一些常见的面试题
近期前端中的 一些常见的面试题
localStorage使用总结
前端
图文详解前端CSS中的Grid布局,你真的可以5
CSS3 按钮特效(一)
HTML
ionic APP二维码插件 地址
为什么在CSS中不要再使用@import
CSS 笔记
上一篇文章      下一篇文章      查看所有文章
加:2015-07-06 15:09:23  更:2017-05-16 04:47:27 
 
360图书馆 软件开发资料 购物精选 新闻资讯 Chinese Culture 三丰软件 开发 中国文化 阅读网 日历 万年历 2019年10日历
2019-10-22 20:09:20
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  编程知识