CSS中伪元素的使用介绍
2019-10-12 08:12:10来源：爱站网 阅读 ()
在css中伪元素在项目开发中用的并不多，但是必要的时候也是非常有用的，本文中小编为大家介绍一个不错的示例，为大家详细讲解CSS中伪元素的使用介绍，大家可以感受下。
对于一个很好的编辑器VS来说,它对于编程语句的自动提示功能是很强大的,有时,我们根本不需要看相关API,而直接看VS给我们的提示就可以完成一个新技术的学习了.
今天我们来说几个CSS中的伪元素,它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉字是统一的,如果要改它们,就都要变的,如,我们希望把建立改为"新建",那么所有的建立都要改成新建,这代码量可是不小,当然,如果你这样写建立这改起来是挺麻烦的,而如果你使用伪元素呢?看下面代码:,而在页面上也会显示"建立",而它就是通过伪元素来实现的.
一 元素前和元素后添加指定内容
?
/* 在类名为read的a标签位置的后面添加查看字符,例如:详细,它的结果就是"详细查看" */
a.read:after {
content: '查看';
}
?
a.del:after {
content: '删除';
}
a.edit:after {
content: '编辑';
}
a.create:after {
content: '新建';
}
HTML调用代码
?
?
?
?
?
页面显示截图
二 为元素集合的第一个元素添加指定样式
?
?
?
?
/* 为样式为list的table标签下的第一个tr标签,添加下面的CSS样式 */
table.list tr:first-child {
background-color: #5C87B2;
color: #fff;
font-weight: bold;
}
HTML调用代码
?
?
?
?
?
| 编号 |
| 1 |
| 2 |
页面显示截图
CSS中伪元素的使用介绍就到这里了，其实css中还有很多的实用技巧可以帮助我们提高工作学习效率，有待朋友们多多发掘。
原文链接:https://js.aizhan.com/web_authoring/css/9389.html
如有疑问请与原作者联系
标签：
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有
上一篇：常用的CSS透明属性
下一篇：经常使用的table样式
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点，学前端，基础不好一切白费！ 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯： 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营： 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧： 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash
