CSS3 伪元素选择器(::first-letter ::first-line ::selection)

最新推荐文章于 2024-06-13 22:49:40 发布

houyanhua1

最新推荐文章于 2024-06-13 22:49:40 发布

阅读量845

点赞数

本文链接：https://blog.csdn.net/houyanhua1/article/details/79637993

版权

CSS 同时被 3 个专栏收录

66 篇文章 1 订阅

订阅专栏

HTML5

55 篇文章 1 订阅

订阅专栏

CSS3

34 篇文章 0 订阅

订阅专栏

demo.html：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		/* 伪元素选择器 */
		/* 第一个字母/汉字 */
		li::first-letter {
			color:red;
			background-color: yellow;
		}

		div {
			border: 1px solid #000;
			width: 500px;
			height: 500px;
		}

		/* 第一行 */
		div::first-line {
			background-color: red;
		}

		/* 鼠标选中区域 */
		div::selection {
			background-color: rgba(255,150,50,0.3);
			color: blue;    /* font-size、font-weight等 设置不起作用 */
		}
	</style>
</head>
<body>
	<ul>
		<li>aaaaaaaaaa</li>
		<li>啊啊啊啊啊啊</li>
		<li>날씨날씨날씨날씨</li>
	</ul>
	<div>
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
		aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
	</div>
</body>
</html>

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3 伪元素选择器(::first-letter ::first-line ::selection)

demo.html：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;style&gt; /* 伪元素选择器 */ /* 第一个字母/汉字 *
复制链接

扫一扫