伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或者列表中的第一个元素
伪类用于当已有元素处于的某个状态时,为其添加对应的样式,这个状态是根据用户行为而动态变化的,比如说,当用户悬停在指定的元素时,我们可以用:hover来描述这个元素的状态。虽然它和普通的css类相似,可以为已有的元素添加样式,但是它只有处于dom树无法描述的状态下才能为元素添加样式,所以将其称为伪类。
伪元素用户创建一些不在文档树中的元素,并为其添加样式,比如说,我们可以通过:before来在一个元素前增加一些文本,
CSS伪类
伪类-状态
:link 选择未访问的链接
:visited 选择已访问的链接
:hover选择鼠标指针浮动在其上的元素
:active选择活动的链接
:focus 选择获取焦点的输入字段
伪类-结构化
:not 一个否定伪类,用于匹配不符合参数选择器的元素
:first-child 匹配元素的第一个子元素
:last-child 匹配元素的最后一个子元素
:first-of-type 表示一组兄弟元素中其类型的第一个元素
:last-of-type 表示一组兄弟元素中其类型的最后一个元素
:nth-child 根据元素的位置匹配一个或者多个元素,它接受一个an+b形式的参数
:nth-last-child 与:nth-child相似,不同之处在于它从最后一个子元素开始计数
:nth-of-type与nth-child相似,不同之处在于它是只匹配特定类型的元素
:nth-last-type 与nth-of-type相似,不同之处在于它是从最后一个子元素开始计数的。
:only-child 当元素是其父元素中唯一的子元素时,:only-child匹配该元素
:only-of-type 当元素是其父元素中唯一特定类型的子元素时,
:only-child匹配该元素
:target 当url带有瞄名称,指向文档内某个具体的元素时:target匹配该元素
伪类-表单相关
:checked 匹配被选中的input元素,这个input元素包裹radio和checkbox.
:default 匹配默认选中的元素
:disabled 匹配禁用的表单元素
:empty 匹配没有子元素的元素,如果元素中含有文本节点,html元素或者一个空格,则:empty不能匹配这个元素
:enabled 匹配没有设置disabled属性的表单元素
:in-range 匹配在指定区域内元素,
:out-of-range 匹配不在指定区域内的元素
:indetermimate 当某组中的单选框或复选框还没有选取状态时,:indeterminate匹配该组中所有的单选框或复选框
:valid 匹配条件验证正确的表单元素
:invalid 匹配提交验证错误的表单元素
:optional :required匹配设置有无设置required属性的表单元素
:read-only 匹配设置了只读属性的元素
:read-write匹配处于编辑状态的元素
*伪类-其他
:root 匹配文档的跟元素
:fullscreen 匹配处于全屏模式下的元素
伪元素
1 ::before/:before 在被选元素前插入内容,需要使用content属性指定要插入的内容。被插入的内容实际上不在文档树中
2 ::after/:after 在被元素后插入内容.其用法和特性与:before相似
3 ::first-letter/:first-letter 匹配元素中文本的首字母
4 ::first-line/:first-line 匹配元素中第一行的文本,这个伪元素只能用在快元素中。不能用在内联中
5 ::selection 匹配被用户选择或者处于高亮状态的部分,该元素只支持双冒号的形式
6 ::placeholder 匹配占位符的文本,只有元素设置placeholder属性是,该伪元素才能生效。