CSS之常见伪元素应用

最新推荐文章于 2023-06-30 15:46:34 发布

✎﹏ℳ๓敬坤

最新推荐文章于 2023-06-30 15:46:34 发布

阅读量704

点赞数 2

分类专栏： CSS应用文章标签：前端 css3 html 开发语言 css

本文链接：https://blog.csdn.net/qq_44291585/article/details/121619022

版权

CSS应用专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.first-line:改变首行的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.firstLine{color: red;}
			.firstLine::first-line{color: blue;}
		</style>
	</head>
	<body>
		<p class="firstLine">我是敬坤，今天学习了伪元素的知识，第一CSS伪元素:first-line，他的作用是可以改变首行文字</p>
	</body>
</html>

效果如下：

2.after:在末尾添加内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.firstLine{color: red;}
			.firstLine::after{
				content: '￥';
				color: blue;
			}
		</style>
	</head>
	<body>
		<p class="firstLine">这里展示的是伪元素，可以在最后添加内容比如：</p>
	</body>
</html>

效果如下：

3.before：在头部前添加内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.firstLine{color: red;}
			.firstLine::before{
				content: '￥';
				color: blue;
			}
		</style>
	</head>
	<body>
		<p class="firstLine">这里展示的是伪元素，就是前面蓝色字体哟</p>
	</body>
</html>

效果如下：

4. first-letter：设置第一行第一个文字的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.firstLine{color: red;}
			.firstLine::first-letter{
				color: blue;
			}
		</style>
	</head>
	<body>
		<p class="firstLine">这里展示的是伪元素，就是前面蓝色字体哟</p>
	</body>
</html>

效果如下：

5.placeholder：在input标签中的属性，可以重写placeholder的属性样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.setPlaceholder::placeholder{
				color: red;
				
			}
		</style>
	</head>
	<body>
		<input placeholder="我是placeholder原来的样子" />
		<input placeholder="我是placeholder改变过的样子" class="setPlaceholder"/>
	</body>
</html>

效果如下:

6.selection：重写我们选中内容的样式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			.selection::selection{
				color: red;
				
			}
		</style>
	</head>
	<body>
		<p class="selection">我是敬坤</p>
	</body>
</html>

效果如下：