CSS的伪元素(二)
随便聊聊CSS的伪元素,虽然它们在项目开发中用的并不多,但确实很有用,在项目中不用它,是因为大家不能了解它们,下面是一个工作场景,如有四个按钮,分别是建立,编辑,删除和修改,而我们要求这在前台显示的汉字是统一的,如果要改它们,就都要变的,如,我们希望把建立改为"新建",那么所有的建立都要改成新建,这代码量可是不小,当然,如果你这样写<a>建立</a>这改起来是挺麻烦的,而如果你使用伪元素呢?看下面代码:<a class="create"></a>,而在页面上也会显示"建立",而它就是通过伪元素来实现的。
一 元素前和元素后添加指定内容
/* 在类名为read的a标签位置的后面添加查看字符,例如:<a class='read'>详细</a>,它的结果就是"详细查看" */
a.read:after {
content: '查看';
} a.del:after {
content: '删除';
} a.edit:after {
content: '编辑';
} a.create:after {
content: '新建';
}
a{width:35px;height:22px; line-height:22px;text-align:center;float:left;display:block; margin:2px;background:#063;font-size:13px;color:#fff;}
HTML中调用代码
<a class="create"></a>
<a class="del"></a>
<a class="edit"></a>
<a class="read"></a>
页面呈现
二 为元素集合的第一个元素添加指定样式
/* 为样式为list的table标签下的第一个tr标签,添加下面的CSS样式 */
table.list tr:first-child {
background-color: #5C87B2;
color: #fff;
font-weight: bold;
}
table,table td{border:1px solid #666; border-collapse:collapse;width:100px;}
html调用代码
<table class="list">
<tr>
<td>编号</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>
</table>
CSS的伪元素(二)的更多相关文章
- css的伪元素 ::after ::before 和 图标字体的使用
浅谈css的伪元素::after和::before css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...
- HTML&CSS基础-伪元素选择器
HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- HTML和CSS设置动态导航以及CSS中伪元素的简单说明
HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...
- css的伪元素
这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...
- [CSS]利用伪元素实现一些特殊图形
给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...
- [CSS]利用伪元素实现一些特殊图形 from baidu校招
最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...
- 笑谈CSS的伪元素
今晚上我们来简单的聊一聊CSS的伪元素,多说无益,开聊 GG: 话说盘古开天辟地之时. QQ:嗨,咱今天还能讲的完吗?您给来点实际的啊. GG:要听实际的是吧,得嘞,那今天咱就来聊一聊CSS里的伪元素 ...
- CSS 的伪元素是什么?
CSS伪元素是用来添加一些选择器的特殊效果.用于:向某个选择器中的文字的首行. ㈠语法 ①伪元素的语法: selector:pseudo-element {property:value;} ②CSS类 ...
- 浅谈css的伪元素::after和::before
css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...
随机推荐
- 如何恢复SQL Server 中的Master库
如何恢复SQL Server 2005中的Master库 2011-05-10 16:34 Vegas Lee 博客园 我要评论(0) 字号:T | T master库对于SQLServer来说, ...
- POJ3083Children of the Candy Corn
题意:给你一个迷宫,入口处标为S,出口处标为E,可以走的地方为“.”,不可以走的地方为#,求左转优先时从出口到入口的路程,再求右转优先时,出口到入口的路程,最后求从出口到入口的最短路程. 思路:求前两 ...
- C# 中的命名规则
需要注意: C# 区分大小写 ,若有int a 和 int A ,则a, 和 A是不同的 普通字段,属相,方法,类的命名规则: C#中推荐使用 camelCasing ,和 PascalCasing ...
- Linux解压 tar命令
tar [-cxtzjvfpPN] 文件与目录 ....参数:-c :建立一个压缩文件的参数指令(create 的意思):-x :解开一个压缩文件的参数指令!-t :查看 tarfile 里面的文件! ...
- [2-sat]HDOJ3062 Party
中文题 题意略 学2-sat啦啦啦 2-sat就是 矛盾的 ($x.x’$不能同时取) m对人 相互也有限制条件 取出其中n个人 也有可能是把一件东西分成 取/不取 相矛盾的两种情况 (那就要拆 ...
- untiy 插件工具: 游戏中 策划数据Excel 导出到项目中
https://github.com/zhutaorun/Excel2Unity,这个项目是直接下载就可以用的, 其中原理和相关的解释 http://blog.csdn.net/neil3d/arti ...
- 252. Meeting Rooms
题目: Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2],...] ...
- CMake with Win&MinGW
今天一个下午都在做一件简直耻辱play的事情,论文没看,程序没写,玩了一个下午的编译器...心塞(逃... 言归正传,今天要讲在windows下,使用Cmake和MInGW. 1.g++ MinGW的 ...
- BNU OJ 33691 / LA 4817 Calculator JAVA大数
留着当个模板用,在BNU上AC,在LA上RE……可能是java的提交方式不同??? 数和运算符各开一个栈. 表达式从左到右扫一遍,将数存成大数,遇到数压在 数的栈,运算符压在 运算符的栈,每当遇到右括 ...
- linux中proc文件系统 -- ldd3读书笔记
1./proc 文件系统概述 /proc 文件系统是由软件创建,被内核用来向外界报告信息的一个文件系统./proc 下面的每一个文件都和一个内核函数相关联,当文件的被读取时,与之对应的内核函数用于产生 ...