你应该知道CSS选择器技巧

什么是:before和:after？ 该如何使用他们？

:before是css中的一种伪元素，可用于在某个元素之前插入某些内容。

  <style>

      div{

          width:100px;

          height:100px;

          float: left     }

      .first-div{

          background:purple;

          zoom:1.5     }

      .second-div{

          background:black;

          zoom:1     }

      .third-div{

          background:red;

          zoom:.5     }

  </style>

  <div></div>

  <div></div>

  <div></div>

以上代码将会展示的依次是紫色-黑色-红色的div，大小分别是100px的1.5倍，1倍，0.5倍。

em 和 rem 是什么

1em等于当前的字体尺寸，数值的改变意味着字体大小的调整。em 有继承这个特性，也就是说，外部父元素定义了字体的em大小，内部子元素会继承这一属性的样式。

 <style>

      body{

        font-size: 12px; 

      }

      /*html{

          font-size:12px;

      }*/

      div{

          width:200px;

          height:100px;

          float:left     }

      .first-div{

         font-size: 1em      }

      .second-div{

          font-size:2em      }

      .third-div{

          font-size:1rem      }

      .fourth-div{

          font-size:2rem      }

  </style>

  <div>Hello World</div>

  <div>Hello World</div>

  <div>Hello World</div>

  <div>Hello World</div>

以上代码分别展示了不同大小的字体，em和rem的区别可以通过仅仅注释body字体样式和html字体样式来看看他们之间的差别。

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：你应该知道CSS选择器技巧

关键词：CSS