随便聊聊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的伪元素(二)的更多相关文章

  1. css的伪元素 ::after ::before 和 图标字体的使用

    浅谈css的伪元素::after和::before   css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和 ...

  2. HTML&CSS基础-伪元素选择器

    HTML&CSS基础-伪元素选择器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  3. HTML和CSS设置动态导航以及CSS中伪元素的简单说明

    HTML页面代码: <!DOCTYPE html> <html> <head> <title>Test</title> <meta c ...

  4. css的伪元素

    这里想将的是两个伪元素,一个是:first-line——用来向文本的首行添加特殊样式,并且不论该行出现多少单词:只能与块状元素关联. 如下属性可以应用于:first-line伪元素 font属性 co ...

  5. [CSS]利用伪元素实现一些特殊图形

    给定的html代码是: <div class='square'></div> 平常实现我们常是通过添加小的icon来实现,不仅需要添加图片资源,还需要改动html结构. CSS ...

  6. [CSS]利用伪元素实现一些特殊图形 from baidu校招

    最近在博客园看到某人发的baidu校招题目,说是要用一行html代码实现下面的这个图形: 给定的html代码是: <div class='square'></div> ---- ...

  7. 笑谈CSS的伪元素

    今晚上我们来简单的聊一聊CSS的伪元素,多说无益,开聊 GG: 话说盘古开天辟地之时. QQ:嗨,咱今天还能讲的完吗?您给来点实际的啊. GG:要听实际的是吧,得嘞,那今天咱就来聊一聊CSS里的伪元素 ...

  8. CSS 的伪元素是什么?

    CSS伪元素是用来添加一些选择器的特殊效果.用于:向某个选择器中的文字的首行. ㈠语法 ①伪元素的语法: selector:pseudo-element {property:value;} ②CSS类 ...

  9. 浅谈css的伪元素::after和::before

    css中的::after和::before已经被大量地使用在我们日常开发中了,使用他们可以使我们的文档结构更加简洁.但是很多人对::after和::before仍不是特别了解,究竟他们是做什么的?如何 ...

随机推荐

  1. 如何恢复SQL Server 中的Master库

    如何恢复SQL Server 2005中的Master库 2011-05-10 16:34 Vegas Lee 博客园 我要评论(0) 字号:T | T   master库对于SQLServer来说, ...

  2. POJ3083Children of the Candy Corn

    题意:给你一个迷宫,入口处标为S,出口处标为E,可以走的地方为“.”,不可以走的地方为#,求左转优先时从出口到入口的路程,再求右转优先时,出口到入口的路程,最后求从出口到入口的最短路程. 思路:求前两 ...

  3. C# 中的命名规则

    需要注意: C# 区分大小写 ,若有int a 和 int A ,则a, 和 A是不同的 普通字段,属相,方法,类的命名规则: C#中推荐使用  camelCasing ,和 PascalCasing ...

  4. Linux解压 tar命令

    tar [-cxtzjvfpPN] 文件与目录 ....参数:-c :建立一个压缩文件的参数指令(create 的意思):-x :解开一个压缩文件的参数指令!-t :查看 tarfile 里面的文件! ...

  5. [2-sat]HDOJ3062 Party

    中文题 题意略 学2-sat啦啦啦 2-sat就是    矛盾的 ($x.x’$不能同时取) m对人 相互也有限制条件 取出其中n个人 也有可能是把一件东西分成 取/不取 相矛盾的两种情况 (那就要拆 ...

  6. untiy 插件工具: 游戏中 策划数据Excel 导出到项目中

    https://github.com/zhutaorun/Excel2Unity,这个项目是直接下载就可以用的, 其中原理和相关的解释 http://blog.csdn.net/neil3d/arti ...

  7. 252. Meeting Rooms

    题目: Given an array of meeting time intervals consisting of start and end times [[s1,e1],[s2,e2],...] ...

  8. CMake with Win&MinGW

    今天一个下午都在做一件简直耻辱play的事情,论文没看,程序没写,玩了一个下午的编译器...心塞(逃... 言归正传,今天要讲在windows下,使用Cmake和MInGW. 1.g++ MinGW的 ...

  9. BNU OJ 33691 / LA 4817 Calculator JAVA大数

    留着当个模板用,在BNU上AC,在LA上RE……可能是java的提交方式不同??? 数和运算符各开一个栈. 表达式从左到右扫一遍,将数存成大数,遇到数压在 数的栈,运算符压在 运算符的栈,每当遇到右括 ...

  10. linux中proc文件系统 -- ldd3读书笔记

    1./proc 文件系统概述 /proc 文件系统是由软件创建,被内核用来向外界报告信息的一个文件系统./proc 下面的每一个文件都和一个内核函数相关联,当文件的被读取时,与之对应的内核函数用于产生 ...