CSS——25.伪元素1(“::first-letter ,::first-line ”)

选择元素中的

html 复制代码
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪元素</title>
		
	
		<style type="text/css">
			div::first-letter{
				color: red;
			}
		</style>
	

</head>
	<body>
		<!--伪元素:(伪元素即假的元素)文档结构中没有出现的元素-->
		<!--伪元素使用"::"伪元素选择器的使用-->
		<!--::first-letter  选择的是元素中第一个文字-->
		<!--::first-line   选择的是元素中第一行文字,会根据浏览器的缩放自动调整-->
		
		<div>
		我爱学习
		</div>
		
		
	</body>
</html>

div::first-letter :first-letter是伪类选择器,其作用选择的是div中的元素中第一个文字

div::first-line :first-line是伪类选择器,其作用选择的是div中的元素第一行。会根据我们对浏览器页面窗口的缩放自动调整第一行选中的长度

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪元素</title>
		



	<style type="text/css">
			div::first-line{
				color: red;
			}
			
			
		</style>
	</head>
	<body>
		<!--伪元素:(伪元素即假的元素)文档结构中没有出现的元素-->
		<!--伪元素使用"::"-->
		<!--::first-letter  选择的是元素中第一个文字-->
		<!--::first-line   选择的是元素中第一行文字,会根据浏览器的缩放自动调整-->
		
		<div>
		我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习我爱学习
		</div>
		
		
	</body>
</html>


相关推荐
陈随易6 分钟前
搞钱点子之生态鱼缸
前端·后端·程序员
PBitW10 分钟前
从空目录到上线:我全程用 TRAE 做了一款微信小游戏合集(含一次完整架构重构)
前端·trae
不爱学英文的码字机器15 分钟前
从Q1迁到T1,同一个编号已经换了含义
前端·数据库·microsoft
云和数据.ChenGuang25 分钟前
光哥说Python 循环导入(Circular Import)深度解析:成因、排查与解决方案
开发语言·前端·人工智能·python·langchain
avi911129 分钟前
【AI教人】在Inspector显示所有Delegate-Odin Inspector之三
java·前端·算法·delegate·inspector·editor扩展·unity editor
fengci.41 分钟前
BUUCTF(困难部分)
android·开发语言·前端·学习·php
Ward的AI产品实战42 分钟前
开源 AI 网关 Magpie 调优终结篇:顺位排错、跨家族对抗审查与 5 大路由组重构(下篇)
前端·人工智能
Highcharts.js44 分钟前
BI可视化图表“维护难”问题的解决方案
开发语言·前端·javascript·编辑器·ecmascript·bi·highcharts
广州华水科技1 小时前
单北斗GNSS在建筑形变监测中的应用与优势分析
前端
hunter_0761 小时前
Swift、Objective-C++ 与 Flutter 如何调用 C++:从混编接入到内存安全
前端