css中伪类/伪元素详解

Posted 2020-10-06

一、伪类和伪元素

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

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