• 技术文章 >web前端 >前端问答

    css3伪类和伪元素是什么意思

    青灯夜游青灯夜游2022-01-13 13:01:13原创110

    在css3中,伪类是一种用于已有元素处于某种状态时为其添加对应样式的选择器,且这个状态是根据用户行为而动态变化的;而伪元素的意思为"假元素"或者"伪装元素",是一个用于创建一些不在DOM树中的元素,并为其添加样式的选择器。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    伪类是什么

    伪类是一种用于已有元素处于某种状态时(滑动、点击等)为其添加对应样式的选择器,且这个状态是根据用户行为而动态变化的。

    例如:当用户悬停在指定元素时,可以通过:hover来描述这个元素的状态,虽然它和一般css相似,可以为已有元素添加样式,但是它只有处于DOM树无法描述的状态下才能为元素添加样式,所以称为伪类。

    伪元素是什么

    伪元素直义理解就是"假元素"或者"伪装元素"。其实也可以这么理解, 伪元素实际上就是虚拟的元素,不存在的元素(code形式), 你也无发在文档中找到他们,因此说伪元素是虚拟元素。

    伪元素是一个用于创建一些不在DOM树中的元素,并为其添加样式的选择器。

    通过伪元素您不需要借助元素的 ID 或 class 属性就可以对被选择元素的特定部分定义样式。例如通过伪元素您可以设置段落中第一个字母的样式,或者在元素之前、之后插入一些内容等等。

    伪类和伪元素的区别:

    请看下面例子:

    例一:

    <ul>
      <li>第一列</li>
      <li>第二列</li>
    </ul>

    如果我们想要给第一列添加样式,我们可以通过以下两种方式:

    (1)给第一列添加一个类,并在该类中定义样式:

    <ul>
      <li class="first-item">第一列</li> 
      <li>第二列</li></ul>
    </ul>
    .first-item{color:orange;}

    (2)如果不用添加类的方法,我们可以通过给第一个<li>设置:first-child伪类来为其添加样式,这时,被修饰的li依然存在于DOM树中

    <ul>
      <li>第一个</li>
      <li>第二个</li>
    </ul>
    li:first-child{color:orage;}

    例二:

    <p>Hello World, and wish you have a good day!</p>

    想要给该段落第一个字母添加样式,可以有以下方法:

    (1)給第一个字母包裹<span>元素,并给span设置样式:

    <p>
      <span class="first">H</span>ello World, and wish you have a good day!
    </p>
    .first{color:red;}

    (2)如果不创建<span>元素,我们可以通过给<p>元素设置P:first-letter伪元素为其添加样式,这时看起来像创建了一个虚拟的span元素并为其添加样式,但实际上在DOM数中并不存在这个span元素

    <p>Hello World, and wish you have a good day!</p>
    p:first-letter{color:red;}

    从上述例子中我们可以看出:伪类的操作对象是文档树中已有的元素,而伪元素则创建了一个文档树外的元素。因此,伪类与伪元素的区别在于:有没有创建一个文档树之外的元素。

    伪元素使用单冒号还是双冒号?

    css3规范中要求使用双冒号(::)表示伪元素,以此来区分伪类和伪元素,比如::before和::after等伪元素使用双冒号(::),:hover:active伪类使用单冒号(:)。除了一些低于IE8版本的浏览器外,大部分浏览器都支持伪元素的双冒号(::)表示方法。

    然而除了少部分伪元素如::backdrop必须使用双冒号(::),大部分伪元素都支持单冒号和双冒号的写法,比如::after,写成:after一样可以正常运行。

    w3c标准中说到,虽然CSS3标准要求伪元素使用双冒号的写法,但也依然支持单冒号的写法。为了向后兼容,我们建议你在目前还是使用单冒号的写法。

    常用伪类有:

    常用伪元素

    (学习视频分享:css视频教程

    以上就是css3伪类和伪元素是什么意思的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:css3 伪类 伪元素
    上一篇:什么叫html5内联svg 下一篇:css3控制元素隐藏的方式有哪些

    相关文章推荐

    • css3怎样设置旋转点位置• css3的圆角边框属性是什么• css3中用什么连接class• css3使用什么属性表示左浮动• CSS3设置动画的相关属性有哪些• css3中常用的背景属性有哪几个

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网