栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

使用 CSS 伪元素需要注意的

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

使用 CSS 伪元素需要注意的

伪元素 ::before,::after 1. 空元素(不能包含内容的元素)不支持 ::before,::after
  • IE 不支持的元素有:img,input,select,textarea。
  • FireFox 不支持的元素有:input,select,textarea。
  • Chrome 不支持的元素有:input[type=text],textarea。
2. 必须设置 content 属性

若不设置,则伪元素不会显示。如果不想设置 content 的内容,可以将内容设置为空。如:

.a:before {
    content: '';
    display: block;
    width: 100px;
    height: 100px;
    background-color: red;
}
3. content 的属性值要遵循一些规则

要遵循如下规则:

  • 如果 content 的值是常量,必须用单引号或双引号括起来。如:content:'abc'; , content:"abc";。
  • 如果 content 的值是该元素的某个属性于常量组合而成的,常量仍然要用单引号或双引号括起来,之间不需要加号。如:content: '('attr(title)')';。感觉这种写法好违法直觉。

若 content 的属性值不遵循如上要求,则伪元素不会显示。

4. content 的属性值中如何设置特殊字符?

如下表所示:

特殊字符 content 中这么写
空格 content:"0a0";
< content:"03c";
> content:"03e";
& content:"026";
" content:"022";
© content:"0a9";
® content:"0ae";
× content:"0d7";

更多见 这里。

伪元素 ::first-letter,::first-line
  1. 只对 display 为 block 和 inline-block 之类的块级元素有效。
  2. 对内容的开头是符号,或者第一个是英文字母或数字,第二个是符号的,使用 ::first-letter 来设置样式时,会对第一个字母和符号都生效。好违反直觉。
相关文章
  • CSS伪元素介绍

本文遵守创作共享CC BY-NC-SA 4.0协议
网络平台如需转载必须与本人联系确认。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/243514.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号