css篇文字伪类 first-line 与first-letter :selectio :before :after

最新推荐文章于 2023-08-04 16:11:39 发布

王先生6666

最新推荐文章于 2023-08-04 16:11:39 发布

阅读量319

点赞数

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_42497127/article/details/121498760

版权

first-line 与first-letter 文字伪类元素选择器用于选择元素的局部

E:first-line	表示E元素中的第一行
first-letter	表示E元素中的第一个字符

案例1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				border: 1px solid red;
				font-size: 24px;
			}
			div:first-line{
				background-color: red;
			}
			div:first-letter{
				font-size: 48px;
			}
		</style>
	 
	</head>
	<body>
		<div>
			又发博客了 大家开来看啊
			你们快来看~
			又发博客了 ，大家开来看啊~
			你们不要走~
			<mark>加wx   wzq85006194</mark>
			你们不要走~
			又发博客了 大家开来看啊
			你们不要走~
		</div>
	</body>
</html>

案例2

E::selection表示E元素在用户选中文字时
			E::before 生成内容在E元素前
			E::after 生成内容在E元素后

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			div{
				width: 200px;
				border: 1px solid red;
				font-size: 24px;
			}
			div::selection{
				background-color: #eb7350;
				color: #fff;
			}
			div::after{
				content: "这是after插入的内容";
				background-color: pink;
				display: block;
			}
			div::before{
				content: "这是before插入的内容";
				background-color: pink;
				display: block;
			}
		</style>
		<!--
			E::selection表示E元素在用户选中文字时
			E::before 生成内容在E元素前
			E::after 生成内容在E元素后

			
			
			:	伪类
				给某个元素添加特殊的效果
			::	伪元素
				不在静态文件中真实存在
		-->
	</head>
	<body>
		<div>
			又发博客了 大家开来看啊
			你们快来看~
			又发博客了 ，大家开来看啊~
			你们不要走~
			<mark>又发博客了 大家开来看啊。 加wx   wzq85006194</mark>
			你们不要走~
			又发博客了 大家开来看啊
			你们不要走~
		</div>
	</body>
</html>

王先生6666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css篇文字伪类 first-line 与first-letter :selectio :before :after

first-line 与first-letter 文字伪类元素选择器用于选择元素的局部E:first-line表示E元素中的第一行first-letter表示E元素中的第一个字符案例1<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> div{ width:
复制链接

扫一扫