CSS中的几个伪元素应用详细介绍

日期:2021-03-08 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

针对1个很好的编写器VS来讲,它针对程序编写句子的全自动提醒作用是很强劲的,有时,大家压根不必须看有关API,而立即看VS给大家的提醒便可以进行1个新技术应用的学习培训了.

今日大家来讲几个CSS中的伪元素,它们在新项目开发设计选用的其实不多,但的确很有效,在新项目中无需它,是由于大伙儿不可以掌握它们,下面是1个工作中情景,如有4个按钮,各自是创建,编写,删掉和改动,而大家规定这在前台接待显示信息的中国汉字是统1的,假如要改它们,就都要变的,如,大家期待把创建改成"新建",那末全部的创建都要改为新建,这编码量但是不小,自然,假如你这样写<a>创建</a>这改起来是挺不便的,而假如你应用伪元素呢?看下面编码:<a class="create"></a>,而在网页页面上也会显示信息"创建",而它便是根据伪元向来完成的.

1 元素前和元素后加上特定內容

拷贝编码
编码以下:

/* 在类名为read的a标识部位的后边加上查询标识符,比如:<a class='read'>详尽</a>,它的結果便是"详尽查询" */
a.read:after {
content: '查询';
}</p> <p> a.del:after {
content: '删掉';
}</p> <p> a.edit:after {
content: '编写';
}</p> <p> a.create:after {
content: '新建';
}

HTML启用编码

拷贝编码
编码以下:

<a class="create"></a>
<a class="del"></a>
<a class="edit"></a>
<a class="read"></a>

网页页面显示信息截图

2 为元素结合的第1个元素加上特定款式

拷贝编码
编码以下:

/* 为款式为list的table标识下的第1个tr标识,加上下面的CSS款式 */
table.list tr:first-child {
background-color: #5C87B2;
color: #fff;
font-weight: bold;
}

HTML启用编码

拷贝编码
编码以下:

<table class="list">
<tr>
<td>序号</td>
</tr>
<tr>
<td>1</td>
</tr>
<tr>
<td>2</td>
</tr>
</table>

网页页面显示信息截图