CSS - 伪元素_CSS 菜鸟教程

CSS 伪元素 用于设置元素的指定部分的样式。在浏览网页时，您可能已经注意到某些段落的第一个字母比其他字母大。这种针对元素特定部分的样式是使用 CSS 中的伪元素完成的。在本教程中，我们将解释所有伪元素及其功能。

什么是伪元素？

CSS 伪元素用于设置元素的特定部分的样式，这些元素不是 DOM（文档对象模型）的一部分，也不存在于 HTML 标记中。例如，段落的第一个字母、输入元素内的占位符文本或文档中的选定部分。

伪元素用双冒号（ :: ) 表示法表示。
选择器中只能使用一个伪元素。
选择器中的伪元素必须出现在所有其他组件之后。例如，p::last-line:hover 无效。
伪元素可用于添加装饰样式、创建特殊效果以及修改已应用状态的元素的某些部分的外观。例如，p:hover::last-line 是一个有效的语句，当段落悬停时，它会选择段落的最后一行

语法

selector::pseudo-element {
	 property: value;
}

浏览器支持四个原始伪元素的单冒号语法，即 ::before、::after、::first-line 和 ::first-letter。

内容插入伪元素

在 CSS 中，伪元素 ::before 和 ::after 用于在任何元素之前和之后插入文本内容或图像。

例

此示例演示如何使用 CSS 在段落的开头和结尾插入文本和图像。

<!DOCTYPE html>
<html>

<head>
		<style>
				p:before {
						content: "NOTE:";
						font-weight: bold;
				}
				p:after {
						content: url(/css/images/smiley.png);
				} 		  
		</style>
</head>

<body>
		<p>
				我们在开头插入了介绍，在结尾插入了表情符号。
		</p>
</body>
</html>

CSS 背景伪元素

在 CSS 中，伪元素 ::backdrop 用于设置模态上下文中元素的背景样式，例如显示 <dialog> 元素后面的背景。

例
以下示例演示了伪元素 ::backdrop 的用法。

<!DOCTYPE html>
<html>

<head>
		<style>
				body{
						height: 200px;
				}
				dialog {
						padding: 20px;
						border: 2px solid black;
						border-radius: 10px;
				}
				dialog::backdrop {
						/* Semi-transparent black */
						background-color: rgba(0, 0, 0, 0.5); 
				}
		</style>
</head>

<body>
		<h3> Backdrop Example </h3>

		<dialog id="myDialog">
				<p>这是一个有风格背景的对话。</p>
				<button id="closeButton"> Close </button>
		</dialog>

		<button id="openButton">Open Dialog</button>

		<script>
				const dialog = document.getElementById('myDialog');
				const openButton = document.getElementById('openButton');
				const closeButton = document.getElementById('closeButton');

				openButton.addEventListener('click', () => {
						dialog.showModal();
				});

				closeButton.addEventListener('click', () => {
						dialog.close();
				});
		</script>
</body>
</html>

CSS ::cue 伪元素

在 CSS 中，伪元素 ::cue 与 Web 视频文本轨道一起使用，为 <video> 和 <audio> 等媒体元素设置文本轨道的特定部分（如字幕或字幕）的样式。

例

以下示例演示了伪元素 ::cue 的用法：

<!DOCTYPE html>
<html>
<head>
<style>
		video {
				width: 100%;
		}

		video::cue {
				font-size: 1rem;
				color: peachpuff;
		}
</style>
</head>
<body>
		<video controls src="/css/foo.mp4">
				<track default kind="captions" 
							 srclang="en" src="/css/cue-sample.vtt" />
		</video> 	 
</body>
</html>

CSS 首字母伪元素

在 CSS 中，伪元素 ::first letter 用于定位任何元素（如 div、段落、span 等）的文本内容的第一个字母

例

以下示例演示了伪元素 ::first-letter 的用法：

<!DOCTYPE html>
<html>

<head>
		<style>
				p::first-letter { 
						text-transform: uppercase;
						font-size: 2em;
						color: darkred;
						font-style: italic;
				}
		</style>
</head>

<body>
		<p>
				this is a paragraph with first letter in lowercase, 
				we used ::first-letter pseudo-element to capitalize
				first-letter of paragraph with a larger font size 
				and a different color. 
		</p>
</body>

</html>

CSS 第一行伪元素

在 CSS 中，伪元素 ::first-line 用于针对任何元素（如 div、段落、span 等）的第一行文本内容

例

以下示例演示了伪元素 ::first-line 的用法：

<!DOCTYPE html>
<html>

<head>
		<style>
				p::first-line { 
						background-color: #f0f0f0;
						color: darkred;
						font-style: italic;
				}
		</style>
</head>

<body>
		<p>
				This is a normal paragraph with no stylings, we used 
				::first-line pseudo-element to only style first-line of 
				paragraph by adding a background color, font-style and 
				text color
		</p>
</body>

</html>

CSS 文件-选择器-按钮伪元素

在 CSS 中，伪元素 ::file-selector-button 用于在现代浏览器中设置文件 <input> 元素（<input type=“file”>）的按钮样式。

例

以下示例演示了伪元素 ::file-selector-button 的用法：

<!DOCTYPE html>
<html> 

<head>
		<style>
				body {
						display: block;
						height: 100px;
				}

				input::file-selector-button {
						background-image:url(/css/images/border.png);
						background-size: 200%;
						border: 2px solid black;
						border-radius: 8px;
						font-weight: 600;
						color: rgb(6, 1, 9);
						padding: 15px;
						transition: all 0.25s;
				}
		</style>
</head>

<body>
		<h2> Select a file </h2>
		<input type="file">
</body>

</html>

CSS 标记伪元素

在 CSS 中，伪元素 ::marker 用于设置有序列表和无序列表的标记样式。

例

以下示例演示了伪元素 ::marker 的用法：

<!DOCTYPE html>
<html> 

<head>
		<style>
				ol li::marker {
						color: rgb(11, 38, 241);
						font-weight: bold;
				}
				ul li::marker {
						content: url('/css/images/smiley.png')
				}
		</style>
</head>

<body>
		<h2>Numbered list</h2>
		<ol>
				<li>One</li>
				<li>Two</li>
				<li>Three</li>
		</ol>

		<h2>Bulleted list</h2>
		<ul>
				<li>One</li>
				<li>Two</li>
				<li>Three</li>
		</ul>
</body>

</html>

CSS 占位符伪元素

在 CSS 中,伪元素 ::placeholder 用于设置文本 <input> 元素（<input type=“text”>）内的默认文本的样式。

例

以下示例演示了伪元素 ::placeholder 的用法：

<!DOCTYPE html>
<html> 
<head>
		<style>
				.form {
						border: 2px solid black;
						background: lightgray;
						padding: 25px;
						display: flex;
						flex-direction: column;
						gap: 10px;
				}

				input{
						padding: 10px;
						background-color: cornsilk;
				}

				input::placeholder { 
						color: grey; 
						font-style: italic;
						font-size: 20px;
				} 
		</style>
</head>

<body>
		<div class="form">
				<h2> Your Details:</h2>

				<input type="text" placeholder="First Name">
				<input type="text" placeholder="Last Name">
				<input type="text" placeholder="Address">
				<input type="text" placeholder="Phone">
		</div>
</body>

</html>

CSS 选择伪元素

在 CSS 中，伪元素 ::selection 用于在任何元素（如 <div>、 <p>、<span> 等）中为用户选择的文本设置样式

例

以下示例演示了伪元素 ::selection 的用法：

<!DOCTYPE html>
<html> 

<head>
		<style>
				.highlight::selection { 
						color: yellow;
						background: brown;
				} 
		</style>
</head>

<body>
		<p class="highlight">
				Select Me!!! to see the effect.
		</p>
		<p> No style applied to me. </p>
</body>
</html>

多个伪元素

我们还可以将多个伪元素添加到选择器中，请查看示例。

例

以下示例演示了多个伪元素（ ::first-line 和 ::first-letter ）的用法。

<!DOCTYPE html>
<html>
<head>
		<style>
				p::first-line { 
						text-decoration: underline;
				}
			  
				p::first-letter { 
						text-transform: uppercase;
						font-size: 2em;
						color: red;
				}
		</style>
</head>
<body>
		<p>
				the first line of this paragraph will be underlined and 
				first letter is uppercase, 2em and red in color, as the
				pseudo-element ::first-line & ::first-letter is applied 
				on p. The other lines are not underlined.
		</p>
</body>
</html>

所有 CSS 伪元素

下表显示了 CSS 中的所有伪元素：

伪元素	描述
::after	添加一个伪元素，该伪元素是所选元素的最后一个子元素。
::backdrop	用于设置对话框等元素的背景样式。
::before	添加一个伪元素，该伪元素是所选元素的第一个子元素。
::cue	用于设置带有视频文本轨道的媒体中的字幕和提示的样式。
::first-letter	将样式应用于块级别元素的第一行的第一个字母。
::first-line	将样式应用于块级别元素的第一行。
::file-selector-button	表示 type=“file” 的<input>的按钮。
::marker	选择列表项的标记框。
::part()	表示阴影树中具有匹配部件属性的元素。
::placeholder	表示 <input> 或 <textarea> 元素中的占位符文本。
::selection	将样式应用于文档的选定部分（通过在文本上单击并拖动鼠标来选择）。
::slotted()	表示已放置在 HTML 模板内的插槽中的元素。
::grammar-error	用于设置被浏览器的内置语法检查工具识别为语法错误的文本的样式。
::spelling-error	用于设置已被浏览器的内置拼写检查工具识别为拼写错误的文本的样式。

<< css - 伪类（pseudo_classes） CSS - @ 规则 >>