伪元素 加入不可选定的文字或元素

伪元素
伪元素则代表了某个元素的子元素,这个子元素虽然在逻辑上存在,但却并不实际存在于文档树中。


伪元素作用
伪元素用来表示 原正常元素中的 特殊位置
比如first-letter就是一个伪元素 用来表示p段落(p中段落就是一个元素)中第一个字 通常借此来对一些元素中特殊位置的字符进行修改


first-letter
first-letter 选定段落中第一个字

first-line
first-line 选定一整行

before
选定段落最前 即就跟打字的时候把光标移动到段落最开头一样 可借此在段落最前面输入东西

after
选定段落后面 即就跟打字的时候把光标移动到段落最后面一样 可借此在段落最前面输入东西

content
一个奇怪的玩意 不知道是不是伪元素
用于在段落加入不可选定的内容 一般配合before和after使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪元素</title>
		<style type="text/css">
			p:first-letter{
     
     
				color: orange;
				font-size: 100px;
			}/*first-letter 只修改p段落中第一个字*/
			p:first-line{
     
     
				color: red;
			}/*first-line 修改一整行*/
			p:before{
     
     
				content:"劳资給呢一道";
				font-size: 100px;
			}/*before和content配合使用 
			可在元素最前面加上不可选内容内容*/
			p:after{
     
     
				content:"不要,我不要刀";
				color: gold;
			}
		</style>
		<!--
			伪元素用来表示 原正常元素中的 特殊位置
			比如first-letter就是一个伪元素 用来表示p段落(p中段落就是一个元素)中第一个字
        -->
	</head>
	<body>
		<p> 劳资給腻易圈<br/>打你嗷</p>
	</body>
</html>

猜你喜欢

转载自blog.csdn.net/qq_45821251/article/details/108783848