css中伪类/伪元素详解

文章2019-06-21125 人已阅来源:网络

一、伪类和伪元素

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

  • 伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的(如:hover/:active)。
  • 而伪元素则用于创建一些不在文档树中的元素,并为其添加样式(如:before/:after)。

二、常用伪元素

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

三、常用伪类

伪类 用法 兼容
: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及更早版本不支持