码迷,mamicode.com
首页 > 其他好文 > 详细

关于伪类选择器中一个冒号和两个冒号的区别

时间:2018-03-29 19:02:23      阅读:376      评论:0      收藏:0      [点我收藏+]

标签:sha   比较   blank   pre   bsp   com   osi   定义   gradient   

只要兼容现代浏览器如 webkit、firefox、opera等浏览器,对于伪元素采用双冒号的写法,要是非要兼容IE浏览器,用CSS2的单冒号写法比较安全。

首先,阅读 w3c 对两者的定义:

  • CSS 伪类用于向某些选择器添加特殊的效果。
  • CSS 伪元素用于将特殊的效果添加到某些选择器。

可以明确两点,第一两者都与选择器相关,第二就是添加一些“特殊”的效果。这里特殊指的是两者描述了其他 css 无法描述的东西。

伪类种类

技术分享图片

伪元素种类

技术分享图片

 

<div class="gradient"></div>
<style>
.gradient {
    position:relative;
    width:100px;height:100px;
    background:red;
}
.gradient:before{
    content:"台词1:-";
    background:blue;
    color:#fff;
    width:50px;height:50px;
    position:absolute;left:0;top:0;
}
.gradient::before{ 
    content:"台词2:-";
    color:#fff;
}
</style>

  

现代浏览器

技术分享图片

IE8

技术分享图片

 

关于伪类选择器中一个冒号和两个冒号的区别

标签:sha   比较   blank   pre   bsp   com   osi   定义   gradient   

原文地址:https://www.cnblogs.com/alantao/p/8671272.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!