目 录CONTENT

文章目录

伪类与伪元素选择器

Administrator
2020-07-24 / 0 评论 / 2 点赞 / 11403 阅读 / 2564 字

伪类与伪元素选择器

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    <style type="text/css">
        #abc:target{
            color: red;
        }
    </style>
    <a href="#abc">这是一个连接标签</a>
    <hr>
    <h2 id="abc">这是一个标题</h2>
    
  15. :focus选择获取焦点的表单元素

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

  17. :disabled选择禁用的元素

2

评论区