伪类和伪元素详解

什么是伪类和伪元素？
伪类：存在DOM文档中，逻辑上存在但在文档树中却无须标识的“幽灵”分类，用于向某些选择器添加特殊的效果，伪类的效果可以通过添加实际的类来实现。

伪元素/伪对象：不存在在DOM文档中，是虚拟的元素，是创建新元素。代表某个元素的子元素，这个子元素虽然在逻辑上存在，但却并不实际存在于文档树中，用于将特殊的效果添加到某些选择器。伪元素的效果可以通过添加实际的元素来实现。

伪类选择符有哪些？

• :link //a在未被访问前的样式
• :visited //a 已被访问过的样式
• :hover //鼠标悬停时的样式
• :active //用户激活时样式
• :focus //聚焦时样式
• :lang(fr)//使用特殊语言fr的元素
• :not(s)//不含s选择符的元素
• E:root//匹配E元素在文档 的根元素
• :first-child
• :last-child
• :only-child//匹配父元素仅有一个子元素
• :nth-child(n)匹配父元素第n个子元素
• :nth-last-child(n)匹配父元素倒数第n个元素
• :fisrt-of-type匹配同类型中的第一个同级兄弟元素
• :last-of-type匹配同类型中最后一个同级兄弟元素
• :only-of-type匹配同类型中唯一的一个同级兄弟元素
• :nth-of-type(n)匹配同类型中第n个同级兄弟元素
• :nth-last-of-type(n)匹配同类型中的倒数第n个同级兄弟元素
• :empty匹配没有任何子元素（包括text节点)的元素
• :checked匹配用户界面处于选中状态的元素（radio与checkbox）
• :enabled匹配用户界面上处于可用状态的元素
• :disabled处于禁用状态的元素
• :target匹配相关URL指向的元素
• @page:first设置页面容器第一页使用的样式，仅用于@page规则
• @page:left页面容器位于装订线左边的所有页面使用的样式，仅用于@page规则
• @page:right页面容器位于装订线右边的所胡页面使用样式

伪元素有哪些

• :first-letter/::first-letter设置对象内第一个字符的样式
• :first-line/::first-line设置对象内的第一行样式
• :before/::before设置在对象前发生的内容，用来和content属性 一起使用
• :after/::after设置在对象后发生的内容，用来和content属性一起使用
• ::placeholder设置对象占位符的样式
• ::selection设置对象被选择时的颜色

1）注意伪类只能使用":“;而伪元素即可以使用”:“,也可以使用”::"

:after/::after和:before/::before的异同
相同点：都可以用来表示伪类对象，用来设置对象前的内容
:before和::before写法是等效的; :after和::after写法是等效的
不同点：:before/:after是Css2的写法，::before/::after是Css3的写法
:before/:after 的兼容性要比::before/::after好 ，
不过在H5开发中建议使用::before/::after比较好

2）注意伪对象要配合content属性一起使用，伪对象不会出现在DOM中，所以不能通过js来操作，仅仅是在 CSS 渲染层加入

span:hover {
    color: red;
}
//伪元素
td:first-letter {
    color: red;
}
td:first-line
{
    color: red;
}

前端学习交流群：
永久有效