css3文本选择器 P标签插入内容

时间：5年前阅读：4312

在css中可以使用before伪元素选择器 after伪元素选择器在页面中插入内容，而插入的内容由content属性来定义

一：使用选择器来插入文字

使用选择器来插入文字，在插入的内容是文字时要在文字的两旁加入单引号或者双引号。

为了使插入的内容美观，可以在选择器中加入添加的内容的样式

还可以指定个别元素不进行插入。

给插入的元素增加一个类名，在这个类的样式中指定content的属性值为none，然后给不需要插入的内容加入一个类名即可。

二: 插入图片文件

在content中使用URL指定路径。使用样式表来追加图像文件可以为页面减少大量的编写的时间。例如可以在一些商品列表中追加表示何为新到货物；

还有在样式表中追加图片的方法，就是把它作为元素的背景图片文件来追加。

但是在打印时如果选择不打印背景则背景追加图片的方式就不能显现出来。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
<html xmlns="http://www.w3.org/1999/xhtml">    
<head>    
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    
<title>无标题文档</title>    
<style type="text/css">    
/*选择的是p标签里的第一个字符*/    
/*p:first-letter{    
	color: red;    
	font-size: 25px;    
}*/    
/*选择的是p标签里的第一行*/    
/*p:first-line{    
	color: red;    
	font-size: 25px;    
}*/    
/*在p标签的头部插入内容*/    
/*p:before{    
	content: "哈哈哈哈";    
}*/    
/*也可以这样写*/    
p{    
	position: relative;    
}    
p:before{    
	content: "";    
	position: absolute;    
	left: 0;    
	top: 0;    
	width: 10px;    
	height: 30px;    
	background: blue;    
}    
/*在p标签的尾部插入内容*/    
p:after{    
	content: "666666";    
}    
</style>    
</head>    
<body>    
<p>当然，如果你问我，闰土啊，你在太原这座城市生活了这么久，究竟在太原做前端开发是种怎么样的体验，惊不惊喜，意不意外，刺不刺激？    
我告诉你，在太原当码农，老刺激了，噗嗤~。这或许是一个沉重的话题，每每聊到这时，我便陷入了深思。说实话，从杭州回到老家太原，如果我跟你说心理上没有落差，那是骗人的。太原大部分能和互联网沾点边的公司， 整体的技术栈还是相对来说比较陈旧的，当然这个是由项目性质决定的，面向互联网的项目比较少，优秀的产品基本没有，技术氛围不算浓厚，公司内部的技术交流会是少之又少。    
比如和我同在太原的童鞋小Z，最近就跟我诉苦，说他们公司以前的项目都是jsp,jq写的。他面试的时候和经理聊过,这家公司从去年就开始用vue1.x.x系列开发项目了。但是小Z进组以后发现他们对前端自动化没有什么了解，只是知道 npm run build 能打包项目，但是不知道为什么。知其然不知其所以然，说的就是这个。基本上只是用vue代替了以前jq的dom操作，并没有优化工作流程。还有最近在对接口的时候接触到了前任封装的ajax方法，是用jq的ajax搭配promise。原本几十行代码,他换成axios以后只有不到十行，在项目中经常能见到这种新旧混杂的地方。</p>    
<p>对于小Z的吐槽，我已经司空见惯了。最后他跟我说了句，用vue的页面仔还是页面仔，哈哈~    
吐槽完了劣势，我们再来说说优势。相比于一线城市，在太原撸代码的优势，则是体现在了生活层面。比如说不用租房，不用天天吃外卖，同事都是山西人,很容易交流。在一个生活了十几年的城市，无时无刻都能感觉到放松和亲切。    
还有一个优势，相对于一线城市来说，工作没有太大的压力，有什么比较困难的需求都会让找个成品或者用个第三方，没有那种让造轮子的领导。我在杭州的时候为了压缩首屏加载时间，连UI框架都没用，全是手写，不过那段日子也是我成长最快的时候。    
总之，离家近，便利又心安。</p>    
</body>    
</html>

本站声明:网站内容来源于网络,如有侵权,请联系我们https://www.qiquanji.com,我们将及时处理。

微信扫码关注

更新实时通知

css3文本选择器 P标签插入内容

网友评论