一、伪类和伪元素

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

伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如: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及更早版本不支持

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

  1. CSS选择器:伪类(图文详解)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 伪类(伪类选择器) 伪类:同一个标签,根据其不同的种状态,有不同的样式. ...

  2. JavaScript中定义类的方式详解

    本文实例讲述了JavaScript中定义类的方式.分享给大家供大家参考,具体如下: Javascript本身并不支持面向对象,它没有访问控制符,它没有定义类的关键字class,它没有支持继承的exte ...

  3. CSS 中 display:inline-block 属性使用详解

    本文详细描述了display:inline-block的基础知识,产生的问题和解决方法以及其常见的应用场景,加深了对inline-block应用的进一步理解. 基础知识 display:inline- ...

  4. PyQt(Python+Qt)入门:Designer组件属性编辑界面中QWidget类相关属性详解

    本文适用人员:本文比较长,适合不理解Qt Designer部件属性的人员阅读或资料查找. 声明: 1.如果有人认为本文是简单的复制粘贴+翻译而成,敬请读本文最后的后记: 2.本文为老猿Python学习 ...

  5. java中枚举类的使用详解

    /* * 通过JDK5提供的枚举来做枚举类 */ public enum Direction2 { FRONT("前"), BEHIND("后"), LEFT( ...

  6. OC中数组类NSArray的详解,常用属性和方法(一)

    数组是一个有序的集合,OC中的数组只能存储对象类型, 但是对于对象的类型没有限制. 通过下标访问数组元素,下标从0开始. NSA

  7. Qt中QGraphics类坐标映射关系详解

    1.Item(图元)坐标:属于局部坐标,通常以图元中心为原点(中心对称),非中心对称类,比如dialog类,一般以左上角为原点,正方向x朝右,y朝下. 2.setPos的坐标是父类坐标系的坐标,一般对 ...

  8. Java中File类的方法详解

    File类也是Java中一个比较重要的类,通过他我们可以实现对文件的一系列操作,其内置了很多方法,下面我将按方法的功能分块,逐一讲解: 快速导航 构造方法 常用方法 创建目录 判断 `is...` t ...

  9. OC中数组类NSArray的详解,数组的遍历(二)

    数组类的便利 1.for循环(大家都会的...) 2.NSEmunerator 3.for in 首先重点说下 第二种NSEmunerator枚举器,系统声明是 @interface NSEnumer ...

  10. tomcat中的server.xml元素详解

    附:Tomcat加载顺序 加载类和资源的顺序为: 1./Web-INF/classes 2./Web-INF/lib/*.jar 3.Bootstrap 4.System 5.$CATALINA_HO ...

随机推荐

  1. DataGrid当列宽超出当前宽度时,没有数据也恒有滚动条

    附件是DataGrid支持滚动条的文件. 具体使用如下: 1)DataGrid使用控件模板 <Setter Property="Template" Value="{ ...

  2. DataGridColum的bug

    Datagrid有多个bug: 1,不支持DynamicResource的东西 2, 在Column隐藏后再显示, ColumnHeader的Tag或者DataContext为null. 解决办法: ...

  3. selenium+python中,框架中,怎么返回上一个菜单

    /退回上一级表单 driver.switchTo().defaultContent();

  4. Linux&nbsp;rpm&nbsp;命令参数使用…

    RPM是RedHat Package Manager(RedHat软件包管理工具)类似Windows里面的"添加/删除程序" rpm 执行安装包 二进制包(Binary)以及源代码 ...

  5. skb详细解析【转】

    skb详细解析[转]    摘自:http://blog.chinaunix.net/uid-30035229-id-4883992.html     在自己的模块发送函数中,需要对skb进行重新构造 ...

  6. HDU - 5875 Function(预处理)

    Function The shorter, the simpler. With this problem, you should be convinced of this truth.      Yo ...

  7. window安装android打包环境

    1.下载jdkhttp://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html下载:jdk-8u1 ...

  8. 洛谷P2950 [USACO09OPEN]牛绣Bovine Embroidery

    P2950 [USACO09OPEN]牛绣Bovine Embroidery 题目描述 Bessie has taken up the detailed art of bovine embroider ...

  9. 洛谷 P2216 [HAOI2007]理想的正方形

    P2216 [HAOI2007]理想的正方形 题目描述 有一个a*b的整数组成的矩阵,现请你从中找出一个n*n的正方形区域,使得该区域所有数中的最大值和最小值的差最小. 输入输出格式 输入格式: 第一 ...

  10. 洛谷P3272 [SCOI2011]地板(插头dp)

    传送门 感谢大佬的教导->这里 容易注意到,本题的合法路径“L型地板”有一些特殊的地方:拐弯且仅拐弯一次. 这由于一条路径只有两种状态:拐弯过和没拐弯过,因此我们可以尝试着这样定义新的插头: 我 ...