什么是伪类和伪元素?
伪类:存在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;
}
前端学习交流群:
永久有效