• 关于:before :after


    首先要明白一种思想:结构和样式分离。

    结构和样式分离,就意味着:没有样式表,HTML文档也是一个完整的文档;没有样式表,也能正常阅读用HTML表达的所有内容。明白这种思想就能很好理解样式表中使用------ :before 和 :after中的content: ""; ------就算没有------:before 和 :after中的content: "";------HTML文档也不会受到影响,HTML文档也是一个完整的文档,所以,用简单的话来说: :before 和 :after中的content: "";不过是对HTML的装潢,使HTML看起来更漂亮一些。举个例子:

    1
    <a href="#">知道更多</a>

    以上这句语句,是一个链接,点击就能打开,就算没有任何CSS修饰,也不影响打开链接。但是,如果稍微修饰,这个链接就会看起来美观一些:

    1
    2
    3
    a:after {
      content"0A000BB";
    }

    加上CSS修饰后,链接看起来就美观一些。

     

    既然选择器是::before 和 :after ,

    那么选定的对象就是某个元素的前和后元素,样式当然也就是给选定元素的样式。

    举例来说:

    HTML文件中,有个链接:

    1
    <a href="#">知道更多</a>

    对<a />标签使用样式,就是:

    1
    2
    3
    4
    a:before {
      content"哈哈哈哈";
      colorred;
    }

    那么,用浏览器打开HTML文档,就会看见链接部分变成:  

    哈哈哈哈知道更多

    其中:

    哈哈哈哈

    的字体是红色的,其它不变。

    因为 a:before{} 这个选择器选择的是标签<a href="#">哈哈哈哈知道更多</a>中原来内容“知道更多”之前的我们加进去的部分“哈哈哈哈”。

    这就证明:

    1. 加进去的内容是属于这个标签内的一部分,CSS样式当然也仅仅对这部分有效;

    2. 如果没有内容,那么样式表无效,因为CSS样式必须针对确实存在的内容。

      2.1 例如,如果

      a:before{

        content: "";   /*   没有内容  */

        color: red;

      }

      那么样式表无效,这就相当于:

      a:before{

        color: red;

      }

  • 相关阅读:
    javaScript 中的异步编程
    javaScript内存泄漏
    javaScript| 对象的拷贝
    javaScript 数组的拷贝
    javaScript 去除数组中的重复值
    解决js key中的时间间隔
    js未命题(杂记)
    js中斐波拉切数的三种写法;
    js闭包的七中形式
    Javascript学习日志(三):闭包
  • 原文地址:https://www.cnblogs.com/ss977/p/4365036.html
Copyright © 2020-2023  润新知