css中伪类/伪元素详解

一、伪类和伪元素

伪类和伪元素都是用来修饰不在文档树中的部分，区别在于，

伪类用于当已有元素处于的某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的(如:hover/:active)。

而伪元素则用于创建一些不在文档树中的元素，并为其添加样式(如:before/:after)。

二、常用伪类

伪类	用法	兼容
:link	未访问的链接	主流浏览器都支持
:visited	已访问的链接	主流浏览器都支持
:hover	鼠标划过链接	主流浏览器都支持
:active	已选中的链接	主流浏览器都支持
:focus	选择元素输入后具有焦点	主流浏览器都支持，IE8中必须申明<!DOCTYPE>
:enabled	元素可用状态下	IE8及更早版本不支持
:disabled	元素禁用状态下	IE8及更早版本不支持
:checked	元素选中状态下	IE8及更早版本不支持
:first-child	选择元素的第一个子元素	主流浏览器都支持，IE8或更早版本中必须申明<!DOCTYPE>
:last-child	选择元素的最后一个子元素	IE8及更早版本不支持
:nth-child()	选择元素的一个或多个特定的子元素	IE8及更早版本不支持
:nth-last-child()	从这个元素的最后一个子元素开始选择元素的一个或多个特定的子元素	IE8及更早版本不支持
:nth-of-type()	选择指定的元素	IE8及更早版本不支持
:nth-last-of-type()	从这个元素的最后一个子元素开始选择指定元素	IE8及更早版本不支持
:first-of-type	选择一个上级元素下的第一个同类子元素	IE8及更早版本不支持
:last-of-type	选择一个上级元素下的最后一个同类子元素	IE8及更早版本不支持
:only-child	选择父级元素下的唯一一个子元素	IE8及更早版本不支持
:only-of-type	选择父元素下的唯一一个相同类型的子元素	IE8及更早版本不支持
:empty	选择元素里面没有任何内容的元素	IE8及更早版本不支持
:not()	选择除了某个元素以外的其他元素	IE8及更早版本不支持
:lang	为不同的语言定义特殊的规则	主流浏览器都支持，IE8中必须申明<!DOCTYPE>
:target	设置元素被设置为锚链接的目标元素时候的样式	IE8及更早版本不支持
:default	设置表单的默认样式	IE8及更早版本不支持
:valid	设置有效的表单元素	IE8及更早版本不支持
:invalid	应用于空的必填的,或者验证失败的表单	IE8及更早版本不支持
:required	应用于具有required属性的表单元素	IE8及更早版本不支持
:optional	应用于没有required属性的表单元素	IE8及更早版本不支持
:in-range	应用于具有范围的限制的元素,比如number表单	IE8及更早版本不支持
:out-of-range	与:in-range相反,指定超出范围时的样式	IE8及更早版本不支持
:read-only	应用于内容只读的元素	IE8及更早版本不支持
:read-write	应用于可供用户修改的元素	IE8及更早版本不支持
:root	指向根元素,即html元素	IE8及更早版本不支持

三、常用伪元素

伪元素	说明	兼容
::first-line	选择元素的第一行	主流浏览器都支持
::first-letter	选择文本块的第一个字母	主流浏览器都支持
::before	给元素的前面插入内容	IE8及更早版本不支持
::after	给元素的后面插入内容	IE8及更早版本不支持
::selection	用来改变浏览网页选中文的默认效果	IE8及更早版本不支持
::placeholder	::-webkit-input-placeholde ::-moz-placeholder :-ms-input-placeholder 设置一个表单元素的占位文本	IE8及更早版本不支持

时间： 2024-07-30 09:05:47

css中伪类/伪元素详解的相关文章

CSS选择器：伪类（图文详解）

本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式.这就叫做"伪类".伪类用冒号来表示. 比如div是属于box类,这一点很明确,就是属于box类.但是a属于什么类?不明确.因为需要看用户点击前是什么状态,点击后是什么状态.所以,就叫做"伪类". 静态伪类和动态伪类伪类选择器分为两种. (1)静态伪类:只能用于超链接的

css伪类大全用法详解

CSS伪类及伪元素选择器,如超链接的a:link.a:visited.a:hover等等, 一.超链接 a:link{ color:red;} a:visited{ color:blue;} a:hover{ color:black;} a:active{ color:#6600CC;} 注意:设置的顺序不能变,遵循爱恨(love/hate)原则. ——此原则自己在网上看别人说的,便于记忆就写在这了二.更多伪类 :root ------------------------------ 文档

OC中数组类NSArray的详解(二)

数组类的便利 1.for循环(大家都会的...) 2.NSEmunerator 3.for in 首先重点说下第二种NSEmunerator枚举器,系统声明是 1 @interface NSEnumerator : NSObject <NSFastEnumeration> 2 3 - (id)nextObject; 4 5 @end 6 7 @interface NSEnumerator (NSExtendedEnumerator) 8 9 @property (readonly, copy

Qt中QGraphics类坐标映射关系详解（有图有真相，实例讲解）

如果你英文足够好,可以参考Qt帮助文档中的:The Graphics View Coordinate System. --------------------------------------------------------------------------------------------------------------------------- 首先,先上显示界面图(Embeded dialog),下面就是以该实例讲解: 1.QGraphicsItem及其衍生类以及其他可作为图

关于css伪类，伪元素详解总结

伪类伪类就是一种虚构的状态或者说是一个具有特殊属性的元素可以使用CSS进行样式修饰.常见的几种伪类是: :link , :visited , :hover , :active , :first-child 以及 :nth-child. 这里还有很多,接下来我们将要逐一进行介绍.此外,伪类前面总是加一个冒号(:).之后跟着伪类的名字或者是括号里面的值,如:nth-child. 伪元素关于伪元素,它们更像是虚拟的元素可以和HTML元素一样对待.区别在于它们并不存在于文档树或者DOM之中.这意味着

玩转CSS3,嗨翻WEB前端,CSS3伪类元素详解/深入浅出[原创][5+3时代]

1.博客背景在我的上一篇博客中, 很多园友提出说对css3"画图"不是很理解, 在跟他们私聊了一段时间以后,加上自己在开始自学css3的时候的疑惑,我觉得大家之所以不是很理解主要是因为对伪元素不太了解,介于画图和CSS3里一些高大上的特效用的比较广泛的伪类元素就是::before 和 ::after, 写这篇博客主要也是为了起到一个敲门砖的作用,所以本篇博客主要是讲::before 和 ::after.那么就让我们一起来聊聊伪元素吧. 2.CSS历史伪元素实际上在CSS1(CSS1

【转】Android中measure过程、WRAP_CONTENT详解以及xml布局文件解析流程浅析(下)

转载请注明出处:http://blog.csdn.net/qinjuning 上篇文章<<Android中measure过程.WRAP_CONTENT详解以及xml布局文件解析流程浅析(上)>>中,我们了解了View树的转换过程以及如何设置View的LayoutParams的.本文继续沿着既定轨迹继续未完成的job. 主要知识点如下: 1.MeasureSpc类说明 2.measure过程详解(揭秘其细节);

史上最全web.xml配置文件元素详解

一.web.xml配置文件常用元素及其意义预览 1 <web-app> 2 3  4 <display-name></display-name> 5 6  7 <description></description> 8 9  10 <context-param&g

web.xml配置文件元素详解

一.web.xml配置文件常用元素及其意义 1 <web-app> 2 3  4 <display-name></display-name> 5 6  7 <description></description> 8 9  10 <context-param>