CSS:伪类和伪元素

更多
2020年02月27日 22点43分 作者:叶飞 修改

伪类

伪类是CSS中容易混淆的一个概念:它有的基于元素“自身的”状态(比如表单元素是否选中等),有的基于用户操作元素的状态(比如鼠标悬停于元素上),有的基于元素的位置(比如第n个子元素),还又基于语言其它什么乱七八糟的东西……

前端就这么任性!o(* ̄︶ ̄*)o,认真来说,其实是因为历史原因:最开始只有锚伪类,后面才一点点的加上其他伪类……


锚伪类

用于a标签,它基于用户的鼠标操作,应用得最为广泛,如:

    a:hover{
        color:wheat;
    }

意思是当鼠标悬置(hover)在a标签上时,将这个a标签的颜色变成wheat颜色。除了hover以外,还可以设置:

  • link:未访问(点击)过的,默认的样式
  • active:点击时使用的样式
  • visited:点击过后的样式。有点无语的是:处于隐私保护的目的,a:visited的样式受到了很多限制(详细


表单伪类

用于表单元素,它基于表单元素常用的有:

  • :disabled
  • :readonly
  • :enabled
  • :checked。但是同学们目前学习过的color/background等在checkbox上无效,我们用它紧随的label样式予以演示:
        input:checked + label{
            color: red;
        }
        <label><input type="checkbox" checked /><label>记住我</label></label>
    


元素伪类

它基于元素的位置,常用的有:

:first-child


伪元素

其实伪元素和元素伪类的区别非常……嗯,微妙!

它作用的是元素的第一行或者第一个字母,而不是第一个元素。

    p::first-line {
        color: red;
    }


在元素前面/后面插入一个元素

    hr::before{
        content:url(/images/源栈广告.png);
    }

从语法上讲,它有时候需要使用:,有时候需要使用::,有时候既可以使用:也可以使用::……

比如单个冒号(:)是CSS2中使用的,两个冒号是(::)CSS3推出来的,但因为CSS2的写法已经普及流行开来,所以在CSS3出来之后,浏览器还是得兼容CSS2——但锚伪类啥的又不能使用::,(╯‵□′)╯︵┻━┻,大家按VS智能提示吧,



CSS 伪类 伪元素
赞: 0 踩: 0

打赏
已收到打赏的 帮帮币

你的 打赏 非常重要!
为了保证文章的质量,每一篇文章的发布,都已经消耗了作者 1 枚 帮帮币
没有“帮帮币”,作者无法发布新的文章。

全系列阅读
评论 / 0

前端基础


HTML和CSS

HTML最常用的标签和属性,含HTML5的语义标签和新属性,但不包含需要JavaScript操作的HTML5 API,以及CSS基础(简述CSS 3动画相关),以及bootstrap.js以外的Bootstrap的内容。

Javascript和JQuery

Javascript的基本语法,JQuery类库(含Ajax),以及Bootstrap的JavaScript组件部分

全部
关键字



帮助

反馈