伪对象选择符

最新推荐文章于 2021-06-03 04:29:48 发布

clqxmt

最新推荐文章于 2021-06-03 04:29:48 发布

阅读量414

点赞数

分类专栏： CSS 文章标签：伪对象选择符

本文链接：https://blog.csdn.net/weixin_43755513/article/details/97530569

版权

CSS 专栏收录该内容

68 篇文章 0 订阅

订阅专栏

伪对象选择符

1.:after{content:“value”;}：元素的后边添加content里边的内容
例如：div:after{content:"111";}
content中的内容也可以是图片
例如：div:after{content:url(logo.jpg);}

2.:before{content:"value";}在元素内容的前边添加content里边的内容。语法格式和:after一样

:first-line{} 定义对象内第一行的样式
:first-letter{} 定义对象内第一个字符的样式
::selection{} 可以设置当鼠标选中文字时的效果（默认蓝底白字）但是不能更改文字大小

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			.div1{width:300px; height:150px; background:#f00;}
			.div1:after{content:url(photo01.jpg) "after"; color:#f0f; font-size:20px;}
			
			.div2{width:300px; height:150px; background:#f00; margin-bottom:20px;}
			.div2:before{content:url(photo01.jpg) "before"; color:#f0f; font-size:20px;}
			
			.div3{width:300px; height:50px; background:#f00; margin-bottom:20px;}
			.div3:first-line{color:#00f; font-size:50px;}
			
			.div4{width:300px; height:80px; background:#f00; margin-bottom:20px;}
			.div4:first-letter{color:#00f; font-size:30px;}
			.div4::selection{color:#f0f; background:#ff0;}
		</style>
	</head>
	<body>
		在div后面插入
		<div class="div1">div1</div>
		<br><br>
		在div前面插入
		<div class="div2">div2</div>
		
		定义div中的第一行样式
		<div class="div3">div3div3</div>
		
		定义div中的第一个字符样式
		<div class="div4">div4div4</div>
	</body>
</html>

在这里插入图片描述