伪元素

Posted 2020-11-23 zjx304

可不可以给伪元素再添加伪元素呢？

#example:after:after{
    content: "after";
}

 

      在浏览器中刷新，测试一下会发现什么也没有显示，也就是说再给伪元素添加伪元素目前很多浏览器上是无效的，浏览器忽略掉该定义，只能识别一层伪元素，但是既然可以伪元素添加伪元素，可以期待再为伪元素添加伪元素，其表现力是很强的。

注意： ::before和:before写法是等效的，:befor是Css2的写法，::before是Css3的写法。:before的兼容性要比::before好 ，不过在H5开发中建议使用::before比较好

 

一、常用的伪元素和伪类

伪元素和伪类的写法有点像，

伪元素使用2个冒号，常见的有：::before，::after，::first-line，::first-letter，::selection、::placeholder等；

伪类使用1个冒号，常见的有：:hover，:link，:active，:target，:not()，:focus等。

 

二、伪元素属性和样式

1.content属性

      每个伪元素必须要有content属性，否则的话浏览器不能识别，你可以为content属性添加空引用作为它的值(即:content:“”)。

      你也可以为content包含一个指向一个图像的URL，就像在css里包含一个背景图像一样：

p:before {

  content: url(image.jpg);
}

 

      也可以包含一个Data URI代替图像引用，就像使用css背景一样。

      你还可以选择ATRR(X)中的函数的形式。“把X属性的值以字符串的形式返回”，比如：

a:after {
  content: attr(href);
}

 

      attr()函数的功能是把得到特定属性的值并把它作为插入的文本成为一个伪元素。

      上面的代码会导致页面上的每一个<a>元素的href值立即被放置在每个各自的<a>元素的后面。在文档被打印时，它可以用作一个包含所有URl的打印样式表。

2.标签属性

      伪元素也是元素，所以你可以为它添加大部分其他元素具有的属性，比如定位属性，字体属性，背景属性和盒模型的属性等，另外由于伪元素默认是内联元素，所以如果要使得盒模型中的height等属性有效的话，必须要把它转化为块元素，具体就是设置其display属性为block,或者设置为float等。如下：

#example:after{
    position: absolute;
    display: block;
    left: 20px;
    top: 20px;
    content: """;
    width: 20px;
    height: 20px;
    background: #6F3;
}

      既然伪元素可以定义position等属性，那么before和after的约束就很有限了，before和after的区别只能是在没有特殊定义伪元素的位置等信息的时候的默认行为不一致，before出现在相对绑定的元素之前，而after出现在相对绑定的元素位置之后。

      另外既然可以为伪元素定义盒子模型的属性，就不得不说，伪元素默认为其目标元素的子元素，比如#example:after，伪元素after的父元素就是#example选择符对应的元素，它具有一般子元素盒模型的特性，即为他定义的height和width等属性规则为影响目标元素的规则。

三、伪元素的兼容性

基本可以放心的使用伪元素，因为它有很好的兼容性，可以不用加浏览器前缀而很好的使用它。

支持:before 和 :after 伪元素的浏览器有：

• Chrome 2+,
• Firefox 3.5+ (3.0 had partial support),
• Safari 1.3+,
• Opera 9.2+,
• IE8+ (with some minor bugs),
• 几乎所有的移动浏览器。

      但是IE6和IE7上并不支持，如果不是很在意他们的用户数量的话，基本可以很自由的使用啦。

::before和::after特点

上面说了，伪元素是通过样式来达到元素效果的，也就是说伪元素不占用dom元素节点，引用:before,:after伪元素妙用里面总结的，:before和:after伪元素的主要特点如下：

• 伪元素不属于文档，所以js无法操作它

• 伪元素属于主元素的一部分，因此点击伪元素触发的是主元素的click事件

• 原文说块级元素才能有:before, :after，其实是不妥的，大部分行级元素也可以设置伪元素，但是像img可替换元素，因为其外观和尺寸有外部资源决定，那么如果外部资源正确加载，就会替换掉其内部内容，这时伪元素也会被替换掉，但是当外部资源加载失败时，设置的伪元素是可以起作用的。

基于伪元素的特点可以知道其优缺点，也引用别人文章的话：

• 优点

  • 减少dom节点数
  • 让css帮助解决部分js问题，让问题变得简单

• 缺点

  • 不利于SEO
  • 无法审查元素，不利于调试