zoukankan      html  css  js  c++  java
  • 伪元素与伪类

    1.伪元素

      常用的伪元素:before(在元素之前添加内容),after(在元素之后添加内容);

      不常用的伪元素:first-letter(向文本的第一个字母添加特殊样式),first-line(向文本的首行添加特殊样式);

      使用场景:活动类名的附加效果。这个活动类名可能是伪类带来的,也可能是js动态切换的className

      用法:双冒号紧接在选择器后面,没有空格,如.author::before

      

      这是一个伪元素的经典用法,这个伪元素绑定在一个活动类上,而这个活动类在这里是由伪类hover引起的,需要注意的有三点:冒号周围不能有空格;content是必写属性;需令其display为block即可书写任意宽高,因为伪元素不受DOM的约束。最终效果如下:

      

      同时我们也测一下一个选择器绑定多个伪元素的效果:

      

      .test::hover这个类选择器来讲,足足绑定了3个伪元素,看看效果如何?

      

      可以看到没有压力,一个选择器可以添加多个伪类或伪元素。如果同时添加了before和after且都为绝对定位,那么默认after的z-index要高于before。

    2.伪类

      常用的伪类:hover(鼠标悬浮时),active(鼠标点击时);

      不常用的伪类:link(未访问的链接),visited(访问过的链接);

      使用场景:鼠标悬浮或点击时的效果;

      用法:单冒号紧接在选择器后面,没有空格,如.author:hover

      

      在上述代码中,我们预期的效果:悬浮变黑,点击变红。获得的效果如下:

      

      如果我们把两个伪类的顺序调换一下呢?看看会发生什么:

      

      

      可以看到,悬浮上去仍然会变黑,但是点击不变红,换句话说:伪类顺序的改变引起了效果的紊乱

      

    总结

      1.伪类与伪元素的根本区别在于它们是否创造了新的元素,伪元素创造了新的非DOM元素,而伪类只是在已有的元素上添加类别而已。

      2.伪元素并不的好处是不需要为了一些视觉效果在HTML中添加多余的DOM,需要注意的是伪元素只为视觉效果而生,它不能也不应该涉及任何逻辑。

      3.当为一个选择器添加多个伪类的时候,顺序不能变(link --> visited -->  hover --> active),尤其是常用的伪类中,hover一定要写在active前面

  • 相关阅读:
    操作系统介绍
    python 面向对象 公有属性 用在哪里
    python 类 __module__ __class__
    操作系统发展史
    python 面向对象 字典 有序字典
    python 面向对象 私有属性
    python 面向对象 类 __doc__
    saltstack 部署
    【SQL】MySQL之使用mysqlbinlog进行增量备份及恢复详解
    [SOA] Mule ESB 3.x 入门(二)—— 配置(spring, properties, log4j)
  • 原文地址:https://www.cnblogs.com/zhangnan35/p/10950529.html
Copyright © 2011-2022 走看看