伪类与伪元素选择器
- 伪类与伪元素选择器是在某些元素上面实现特殊状态下的样式效果
- 伪类与伪元素元素是先中某些特殊位置的元素
常见的伪类与伪元素选择器现列举如下
:hover
鼠标悬停的时候的效果,任何元素都会有这个效果:link
链接标签在没有访问之前的状态:visited
链接标签访问之后的状态:active
元素在点击的时候(鼠标还未松开)的状态,任何元素都会有这个效果
上面的四个伪类是有顺序,它们依次是:link---:visited----:hover----:active
,可以简写成lv/ha
lv/ha
可以理解为"由爱(love)生恨(hate)"
-
:first-child
第一个子元素 -
:last-child
最后一个子元素 -
:nth-child(xn+y)
选择器nth-child(even)
选中子元素的偶数项nth-child(odd)
选中子元素的奇数项- 当x>1时,如
nth-child(3n+2)
则代表子元素每3个分一组,再取每个分组的第2项 - 当x=1时,如
nth-child(n+3)
代表从3项开始,一直到最后一项 - 当x=-1时,如
nth-child(-n+3)
取前3项
? 注意:以
*-child
结尾的选择器,先看后面的数值,再去判断选择器类型 -
:first-of-type
当前类型的第一个子元素 -
:nth-of-type(xn+y)
选择器,该选择器与nth-of-child
类似? 注意:以
*-of-type
结尾的选择器,先找出这种选择器的元素,找到这个结果里面去找第几个 -
:not()
排除符合要求的选择器 -
::first-line
选取段落文字的第一行 -
::first-letter
选取段落里面的第一个文字 -
::before
在当前元素的内部的最前面去插入内容 -
::after
在当前元素的内部的最后面去插入内容-
::before/::after
必须通过content
属性去添加 -
::before/::after
不仅可以添加文字,还可以添加图片 -
通过
::before/::after
所追加的内容是在页面上面是不能够通过鼠标进行选取的
-
-
::selection
对页上面选中的文字做出样式设置 -
:checked
指表单元素里面的单选框和复选框选中以后的效果 -
::placeholder
用于设置输入框里面的placeholder
-
:target
某一个元素被链接标签指向以后<style type="text/css"> #abc:target{ color: red; } </style> <a href="#abc">这是一个连接标签</a> <hr> <h2 id="abc">这是一个标题</h2>
-
:focus
选择获取焦点的表单元素 -
:read-only
选择只读的元素 -
:disabled
选择禁用的元素
评论区