当前位置: 首页 > Web前端 > CSS

CSS伪类和伪元素_0

时间:2023-03-30 18:16:03 CSS

一、伪类和伪元素1.CSS伪类适用于用户使用指针设备误指向某个元素(不激活它)的情况。在CSS中,伪类选择器仅根据元素的状态而不是文档树中元素的信息来选择目标对象。示例::hover样式将被任何与链接相关的伪类(如:link、:visited和:active)覆盖。为了保证效果,:hover规则需要放在:link和:visited规则之后,但在:active规则之前,按照LVHA的顺序声明:link-:visited-:hover-:active(记忆方法:LVisgood!表示LV包没问题)。2.CSS[伪元素]伪元素是附加在选择器末尾的关键字,允许您修改所选元素特定部分的样式。::after用于创建伪元素作为被选元素的最后一个子元素。通常,content属性用于向元素添加装饰性内容。这个虚拟元素默认是一个内联元素。简单说明:1.CSS伪类:给已有的元素添加一个样式,但是这个样式是不显示的,只有当用户执行某个操作时才会显示,比如hover伪类,只有当用户通过鼠标将触发里面的样式。并且有类似hover的active、link、visited,可以给一个元素添加多个伪类。使用单个冒号:前缀。其样式写法::hover2.CSS伪元素:为已有元素生成一个元素。注意最多可以生成两个伪元素,分别对应before和after,分别是在一个元素前面或者后面生成一个元素。单冒号或双冒号前缀都可以。它的写法::berfore::before:after::after虽然单冒号和双冒号都可以达到想要的效果,但是:CSS3规范要求使用双冒号(::)来表示伪元素,为了区分伪元素和伪类,比如::before和::after伪元素使用双冒号(::),:hover和:active伪类使用单冒号(:)。除了部分IE8以下的浏览器,大部分浏览器都支持伪元素的双冒号(::)表示。下面两个是例子:下面是菜鸟教程的例子,我改了下:网上的动画效果,其中船上的烟是伪类生成的:打开F12可以看到:伪类船的元素是在船中生成的。再见!