css伪类选择器详细解析及案例使用-----伪元素
- 伪元素:(css3中将所有伪元素前变成了两个冒号,即::first-letter、::first-line、::before、::after、::selection。目的是为了区分伪元素与伪类。对于IE6~IE8,仅支持单冒号写法)
1.::first-letter :用来选择文本块的第一个首字母。
2.::first-line :用来匹配元素的第一行文本。
3.::befor 和 ::after :创建一个作为当前元素子元素的伪元素。常通过content属性来为一个元素添加修饰性的内容。 此元素默认为行内元素。:before和:after伪元素指定了位于一个元素的文档树内容之前和之后的内容的位置。
a. :before和:after伪元素会从文档树中它们附着的元素上继承所有可继承的属性。不可继承的属性,属性值为初始值。
b. :before和:after伪元素会与其它盒相互影响,就像它们是插在其相关元素里的真实元素一样。
c. 本规范并没有完整定义:before和:after伪元素对可替换元素(例如HTML中的IMG)的相互影响。这会在将来的规范中详细定义。(这里的规范指CSS2.1)。
d. 下方的代码,使用伪元素清除浮动。(这里有个问题是,为什么要设置visibility、font-size、height、zoom这几个属性。我在chrome浏览器下去掉这几个属性后,仍然清除了浮动).clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1;
}
4. ::selection :用来匹配突出显示的文本(被选中的文本)。该伪元素仅接受两个属性:background与color。仅IE9支持,FF需加上-moz前缀,webkit内核浏览器支持。
css伪类选择器详细解析及案例使用-----伪元素的更多相关文章
- css伪类选择器详细解析及案例使用-----伪类选择器(1)
动态伪类选择器:E:link :选择匹配的E元素,并且匹配元素被定义了超链接并未被访问过.E:visited :选择匹配的E元素,而且匹配的元素被定义了连接并已被访问过.E:active :选择匹配的 ...
- css伪类选择器详细解析及案例使用-----伪类选择器(2)
结构伪类选择器: <div> <ul> /*ul:only-of-type*/ <li>one</li> /*li:first-child li:nth ...
- css伪类选择器及伪元素选择器
1.类选择器 在css中可以使用类选择器把相同的元素定义成不同的样式.比如: 结果如下: 标题背景未变 2.伪类选择器 类选择器和伪类选择器的区别在于,类选择器我们定义的,而伪类选择器是CSS中已经定 ...
- CSS动态伪类选择器温故-3
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- 关于CSS伪类选择器
#CSS伪类选择器 ##使用css伪类选择器需要注意的 使用css的伪类选择器来选择某元素时,需要特别注意 :first-child 和 :nth-child(n) 等时, 网页渲染是从语句的后面开始 ...
- CSS动态伪类选择器温故
动态伪类选择器 伪类选择器:大家熟悉的:[:link][:visited][:hover][:active]CSS3的伪类选择器分为六种:(1)动态伪类选择器(2)目标伪类选择器(3)语言伪类选择器( ...
- CSS3 选择器——笔记+实战案例(基本选择器、组合选择器、属性选择器、伪类选择器)
使用CSS3 选择器——笔记 CSS通过选择器控制HTML元素,CSS选择器对网页对象可以实现一对一.一对多或者多对一的匹配. 一.CSS3选择器分类 CSS选择器在CSS2.1选择器的基础上新增了属 ...
- CSS魔法堂:稍稍深入伪类选择器
前言 过去零零星星地了解和使用:link.::after和content等伪类.伪元素选择器,最近看书时发现这方面有所欠缺,于是决定稍微深入学习一下,以下为伪类部分的整理. 伪类 伪类选择器实质上 ...
- CSS3新增的伪类选择器
伪类选择器的作用:对已有选择器做进一步的限制,对已有选择器能匹配的元素做进一步的过滤.CSS 3提供的伪类选择器主要分为以下三类: 结构性伪类选择器 UI元素状态伪类选择器 其他伪类选择器 1.结构性 ...
随机推荐
- border和outline区别
border和outline区别: border支持box-sizing: border-box,当有边距时,是新增了边框后在按照以前的边距处理 outline不支持box-sizing: borde ...
- c - 对数组进行排序(通过指针的指针)
通过指针的指针,以及一个指针数组,对实际数组元素进行排序,有一个优点,就是排序过程交换的只有指针数组中的值,而不是实际的数组的元素.当实际元素中的对象很大,特别是结构体等类型时,这样做是很有好处. 下 ...
- CF 277E Binary Tree on Plane (拆点 + 费用流) (KM也可做)
题目大意: 平面上有n个点,两两不同.现在给出二叉树的定义,要求树边一定是从上指向下,即从y坐标大的点指向小的点,并且每个结点至多有两个儿子.现在让你求给出的这些点是否能构成一棵二叉树,如果能,使二叉 ...
- 让Mac OS X中的PHP支持GD
GD库已经是近乎于是现在主流PHP程序的标配了,所以也必须让Mac OS X中的PHP支持GD.在网上搜索了好多,最终按照这个方式成功实现,如何让Mac OS X支持PHP,请查看<让PHP跑在 ...
- Holes in the text Add problem to Todo list Problem code: HOLES
import sys def count_holes(letter): hole_2 = ['A', 'D', 'O', 'P', 'Q', 'R'] if letter == 'B': return ...
- CSAPP--虚拟存储器
虚拟存储器 虚拟存储器(VM)是对主存的一种抽象概念.是硬件一场,硬件地址翻译,贮存,磁盘文件和内核软件的完美交互.他为每个进程提供了一个大的,一致的和私有的地址空间. 它将贮存堪称一个存储在磁盘上的 ...
- Unicode字符集下CString与char *相互转换
经常遇到CString转换char*时只返回第一个字符.原因是因为在Unicode字符集下CString会以Unicode的形式来保存数据,强制类型转换只会返回第一个字符.所以直接转换在基于MBCS的 ...
- WCF-基本知识
WCF-基本知识 (1)WCF服务元数据交换方式介绍: WCF服务有两种方案可以发布自己的元数据.一种是基于HTTP-GET协议提供元数据:另一种则为MEX终结点元数据交换方式,和WCF服务一样使用一 ...
- Powershell 设置数值格式 1
设置数值格式 1 6 6月, 2013 在 Powershell tagged 字符串 / 数字 / 文本 / 日期 / 格式化 by Mooser Lee 格式化操作符 -f 可以将数值插入到字符 ...
- Powershell使用管道
管道并不是什么新事物,以前的Cmd控制台也有重定向的命令,例如Dir | More可以将结果分屏显示.传统的Cmd管道是基于文本的,但是Powershell是基于对象. PS> ls | Sor ...