What are the css3 pseudo-element selectors?-Front-end Q&A-php.cn

What are the css3 pseudo-element selectors?

青灯夜游

Release： 2021-12-16 11:45:09

Original

2870 people have browsed it

css3 pseudo-element selectors include: 1. "::after", insert content after the content of the selected element; 2. "::before", insert content before the content of the selected element; 3 , "::first-letter"; 4. "::first-line"; 5. "::selection".

What are the css3 pseudo-element selectors?

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

CSS pseudo-elements are used to style specified parts of an element.

For example, it can be used to:

Set the style of the first letter and first line of the element
In the content of the element Insert content before or after

css3 pseudo-element selector has

Selector	Description	Example	Example description
::after	After the selected element Insert content after the content. (Use the content attribute to specify the content to be inserted)	p::after	Insert content after each element.
::before	Insert content before the content of the selected element. (Use the content attribute to specify the content to be inserted)	p::before	Insert content before each element.
::first-letter	is used to select the first letter of the specified selector.	p::first-letter	Selects the first letter of each element.
::first-line	is used to select the first line of the specified selector.	p::first-line	Selects the first line of each element.
::selection	Matches the selection part selected by the user. (Supported attributes are color, background, cursor, and outline.)	p::selection	Select the portion of the element selected by the user.

::first-line pseudo-element

::first-line pseudo-element is used to add special styles to the first line of text.

Note: The ::first-line pseudo-element can only be applied to block-level elements.

The following properties apply to the ::first-line pseudo-element:

Font property
Color property
Background properties
word-spacing
##letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear

Example: Style the first line in all

elements

<!DOCTYPE html>
<html>
<head>
<style>
p::first-line {
  color: #ff0000;
  font-variant: small-caps;
}
</style>
</head>
<body>

<p>您可以使用 ::first-line 伪元素将特殊效果添加到文本的第一行。一些更多的文字。越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多，越来越多。</p>

</body>
</html>

Copy after login

What are the css3 pseudo-element selectors?

::first-letter pseudo-element

::first-letter pseudo-element is used to add text to the beginning of the text. Add special style to letters.

Note: The ::first-letter pseudo-element only applies to block-level elements.

The following properties apply to the ::first-letter pseudo-element:

Font property
Color property
Background properties
Margin properties
##vertical-align (only if "float" is "none")
text-transform
line-height
float
clear

elements

<!DOCTYPE html>
<html>
<head>
<style>
p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}
</style>
</head>
<body>

<p>您可以使用 ::first-letter 伪元素为文本的第一个字符添加特殊效果！</p>

</body>
</html>

Copy after login

What are the css3 pseudo-element selectors? ::before and ::after pseudo-elements

::before pseudo-element can be used to insert some content before the content of the element.

::after pseudo-element can be used to insert some content after the element content.

<!DOCTYPE html>
<html>
	<head>
		<style>
			p::before {
				content: "你好，";
			}

			p:after {
				content: "- 台词";
			}
		</style>
	</head>

	<body>

		<p>我是唐老鸭。</p>
		<p>我住在 Duckburg。</p>


	</body>
</html>

Copy after login

What are the css3 pseudo-element selectors?

::selection pseudo-element

::selection pseudo-element matches the part of the element selected by the user .

The following CSS properties can be applied to ::selection:

color

background
cursor
outline
The following example makes the selected text appear red on a yellow background:

Example:

<!DOCTYPE html>
<html>
	<head>
		<style>
			::-moz-selection {
				/* 针对 Firefox 的代码 */
				color: red;
				background: yellow;
			}

			::selection {
				color: red;
				background: yellow;
			}
		</style>
	</head>
	<body>

		<h1>请选择本页中的文本：</h1>

		<p>这是一个段落。</p>
		<div>这是 div 元素中的文本。</div>

		<p><b>注释：</b>Firefox 支持可供替代的 ::-moz-selection 属性。</p>

	</body>
</html>

Copy after login

(Learning video sharing: What are the css3 pseudo-element selectors? css video tutorial

)

The above is the detailed content of What are the css3 pseudo-element selectors?. For more information, please follow other related articles on the PHP Chinese website!