伪类与伪元素是怎么回事儿

什么是伪类和伪元素？转载本文请联系三分钟学习前端公众号。CSS选择器要理解伪类和伪元素，就不得不提到CSS选择器。CSS选择器是元素与其他部分相结合，告诉浏览器应该选择哪个HTML元素作为应用规则中的CSS属性值。选择器的类型有：类型、类和id选择器标签属性选择器运算符伪类和伪元素类型、类和id选择器h1{}/*类型选择器*/.box{}/*类选择器*/#unique{}/*ID选择器*/label属性选择器这组选择器是根据元素上某个label属性是否存在来选择：a[title]{}或者根据label属性是否为特定值来选择：a[href="https://example.com"]{}operator这个选择器可以结合其他选择器来更复杂地选择元素。下面的例子使用操作符（>）选择第一代子元素article>p{}伪类和伪元素。最后一组是伪类和伪元素。这种类型的选择器有很多，通常用于很多目的明确的伪类和伪元素什么是伪类？什么是伪元素？伪类：用于选择处于特定状态的元素，例如鼠标悬停状态（:hover）。它们的行为就好像您将一个类应用到文档的某个部分，帮助您减少标记文本中的冗余类，使您的代码更加灵活和易于维护。伪元素：行为方式类似，但行为就好像你在标记文本中添加了一个新的HTML元素，作用是硬选不存在的元素，表示选择了某种状态，比如：hover,:checked,伪元素表示选中元素的某一部分使得这部分看起来像一个独立的元素，其实不然，比如::before,::after抽象的说伪类就是为了选择元素的某个状态，伪元素是创建一个HTML元素符号来区分伪类，用单冒号：，伪元素开头是双冒号::，但应该是注意到CSS3之前没有定义伪元素统称为伪类，所以目前大部分浏览器都支持使用这两种方式来表示伪元素常见的伪类和伪元素伪类：Pseudo-elements:::before和::after接下来说说最常见的y使用了经典的::before和::after伪元素。::before表示在元素内容之前插入一个虚拟元素，::after表示在元素内容之后插入，::before和::after都支持所有的CSS属性。但需要注意的是，这两个伪元素所在的CSS规则必须指定content属性才能生效。content属性content可以是string,attr(),url()/uri():string

三分钟学会前端