Java教程

伪类和伪元素

本文主要是介绍伪类和伪元素,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

伪类

用于已有元素 处于某种状态时 为其添加对应的样式。

这个状态时根据用户行为而动态变化的。

举例:

:hover :鼠标悬浮时样式

h1:hover{
  color: #42b983;
}

 

伪元素

用于创建一些不在DOM树中的元素,并为其添加样式。

注意:虽然在页面上可以看的见对应的元素,但实际上用伪元素创建的元素时不存在与DOM树中的。

举例:

在每个h1元素中的开头添加一个“@”,结尾都添加一个“#”,并指定颜色:

h1::before {
  content: '@';
  color: #4283b9;
}
h1::after {
  content: '#';
  color: #4283b9;
}

 

伪元素与伪类的区别

  • 伪元素使用的是“ :: ”,伪类使用的是“ : ”
  • 伪元素不允许拼接使用,伪类可以拼接多个使用(需要各个伪类不冲突的情况下)
    //可以
    h2:hover:first-child{
        //...
    }
    
    //不可以
    h2::before::after{
        //...
    }
  •  伪元素只能在伪类的最后面,伪类则可以为与伪元素前面或者后面
    //可以
    h2:hover:first-child::before{
        //...
    }
    
    //不可以
    h2::before:hover{
        //...
    }
  • 伪元素是创建一个不存在于DOM树的元素并且可以对其进行操作,伪类是基于DOM来创建不同状态(修饰元素)
这篇关于伪类和伪元素的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!