伪类与伪元素选择器

伪类与伪元素选择器

1. 伪类与伪元素选择器是在某些元素上面实现特殊状态下的样式效果
2. 伪类与伪元素元素是先中某些特殊位置的元素

---

常见的伪类与伪元素选择器现列举如下

1. :hover鼠标悬停的时候的效果，任何元素都会有这个效果
2. :link链接标签在没有访问之前的状态
3. :visited链接标签访问之后的状态
4. :active元素在点击的时候（鼠标还未松开）的状态，任何元素都会有这个效果

上面的四个伪类是有顺序，它们依次是:link---:visited----:hover----:active，可以简写成lv/ha

lv/ha可以理解为"由爱(love)生恨(hate)"

5. :first-child第一个子元素

6. :last-child最后一个子元素

7. :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结尾的选择器，先看后面的数值，再去判断选择器类型

8. :first-of-type当前类型的第一个子元素

9. :nth-of-type(xn+y)选择器，该选择器与nth-of-child类似

   ? 注意：以*-of-type结尾的选择器，先找出这种选择器的元素，找到这个结果里面去找第几个

10. :not()排除符合要求的选择器

11. ::first-line选取段落文字的第一行

12. ::first-letter选取段落里面的第一个文字

13. ::before在当前元素的内部的最前面去插入内容

14. ::after在当前元素的内部的最后面去插入内容

    • ::before/::after必须通过content属性去添加

    • ::before/::after不仅可以添加文字，还可以添加图片

    • 通过::before/::after所追加的内容是在页面上面是不能够通过鼠标进行选取的

15. ::selection 对页上面选中的文字做出样式设置

16. :checked指表单元素里面的单选框和复选框选中以后的效果

17. ::placeholder用于设置输入框里面的placeholder

18. :target某一个元素被链接标签指向以后

    <style type="text/css">
        #abc:target{
            color: red;
        }
    </style>
    <a href="#abc">这是一个连接标签</a>
    <hr>
    <h2 id="abc">这是一个标题</h2>
    

19. :focus选择获取焦点的表单元素

20. :read-only选择只读的元素

21. :disabled选择禁用的元素