伪类
针对于超链接来说:
- :link
- :visited
注意细节:浏览器是通过历史记录来判断一个链接是否访问过,由于涉及到用户的隐私问题,所以使用visited伪类只能设置字体的颜色
:hover(盘旋,徘徊)
鼠标移入的链接,也可以为其他元素设置hover
:active
正在被点击的链接,也可以为其他元素设置active
:focus
表示元素获取焦点的状态,一般用于文本框
::selection(注意有两个冒号)
表示内容被选中的状态
在火狐中使用::-moz-selection来代替
子元素的伪类
:first-child
寻找父元素的第一个子元素,**在所有的子元素中排序**(前面不指定特定元素就表示全部元素,指定就是交集选择器)
:last-child
寻找父元素的最后一个子元素,在所有的子元素中排序
:nth-child
寻找父元素中的指定位置子元素,在所有的子元素中排序
例子
p:nth-child(3)
可以使用even,来找到偶数的子元素
可以使用odd,来找到奇数的子元素
:first-of-type
寻找指定类型中的第一个子元素
:last-of-type
寻找指定类型中的最后一个子元素
:nth-of-type
寻找指定类型中的指定子元素
伪元素
- :first-letter 表示第一个字符
- :first-line 表示文字的第一行
- :before 表示选择的元素的最前面(一般该伪类都会结合content一起使用,通过content可以向指定位置添加内容)
- :after 表示选中元素的最后面(一般该伪类都会结合content一起使用,通过content可以向指定位置添加内容)
伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构
选择符 | 描述 |
::before | 在元素内部的前面出入内容 |
::after | 在元素内部的后面插入内容 |
注意细节:
- before和after创建一个元素,但是属于行内元素
- 新创建的元素在文档中是找不到的(伪元素特点)
- 语法: element::before{}
- before和after必须有content属性
- 伪元素选择器和标签选择器一样,权重为1
伪元素/伪类的区别
两者的根本区别之阿宇它们是否创造了新的元素。
- 伪元素:不存在在DOM文档中,是虚拟的元素,是创建新元素。代表某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。
- 伪元素:用于将特殊的效果添加到某些选择器。
- 伪元素既可以使用“:”,也可以使用“::”
- 伪类:存在DOM文档中,逻辑上存在但在文档树中却无须标识的“幽灵”分类。
- 伪类:用于向某些选择器添加特殊的效果。(根本意思就是就是对那些不能通过class、id等选择元素的补充)
- 伪类只能使用“:”