[分享]css两个点放在一起

CSS中有一个小技巧，就是可以用两个点“::”来代替一个冒号“:”，用来区分伪类和伪元素。

 示例1：
p:hover {
  color: red;
}

p::before {
  content: "前置文本";
}

p::after {
  content: "后置文本";
} 

上面的代码中，使用了单个冒号的伪类:hover，以及使用了双点的伪元素::before和::after，用来在p标签前后添加文本内容。

双点也可以用来区分伪元素和伪类中的参数。例如在::first-letter中，如果使用单冒号，那么在IE6、IE7、IE8等低版本浏览器中，就会不起作用。而使用双点，则可以保证在各种浏览器中都能生效。

 示例2：
p:first-letter {
  font-size: 20px;
}

p::first-letter {
  font-size: 20px;
} 

上面的代码中，第一行使用了单冒号，只有在高版本的浏览器中才会生效；而第二行使用了双点，则可以保证在各种浏览器中都能正常显示字母的字号。