css两个点放在一起

admin 轻心小站 关注 LV.19 运营
发表于前端技术学习版块 css,教程

CSS中有一个小技巧,就是可以用两个点“::”来代替一个冒号“:”,用来区分伪类和伪元素。 示例1: p:hover { color: red; } p::before { content: 前置文本

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;
} 

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

文章说明:

本文原创发布于探乎站长论坛,未经许可,禁止转载。

题图来自Unsplash,基于CC0协议

该文观点仅代表作者本人,探乎站长论坛平台仅提供信息存储空间服务。

评论列表 评论
发布评论

评论: css两个点放在一起

粉丝

0

关注

0

收藏

0

已有0次打赏