css3 擬似要素セレクターとは何ですか?-フロントエンドQ&A-php.cn

css3 擬似要素セレクターとは何ですか?

青灯夜游

リリース： 2021-12-16 11:45:09

オリジナル

2870 人が閲覧しました

css3 疑似要素セレクターには次のものが含まれます: 1. "::after"、選択した要素のコンテンツの後にコンテンツを挿入します。2. "::before"、選択した要素のコンテンツの前にコンテンツを挿入します。3. , "::first-letter"; 4. "::first-line"; 5. "::selection"。

css3 擬似要素セレクターとは何ですか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

CSS 疑似要素は、要素の指定された部分のスタイルを設定するために使用されます。

たとえば、次の目的で使用できます。

要素の最初の文字と最初の行のスタイルを設定します
要素のコンテンツ内前後にコンテンツを挿入します。

css3 疑似要素セレクターには

# があります。 ## セレクター説明例例の説明::after選択した要素の後コンテンツの後にコンテンツを挿入します。 (挿入するコンテンツを指定するには、 content 属性を使用します) p::after各

要素の後にコンテンツを挿入します。

#::before::first-letter::first-line::selection

::first-line 擬似要素

::first-line 擬似要素は、テキストの最初の行に特別なスタイルを追加するために使用されます。

注: ::first-line 擬似要素は、ブロックレベルの要素にのみ適用できます。

次のプロパティは、::first-line 疑似要素に適用されます:

Font プロパティ
Color プロパティ
背景プロパティ
##word-spacing

例: すべての

要素の最初の行をスタイルする

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

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

</body>
</html>

ログイン後にコピー

css3 擬似要素セレクターとは何ですか?

::first-letter 擬似要素 ::first-letter pseudo-element は追加に使用されますテキストの先頭にテキストを追加します。文字に特別なスタイルを追加します。

注: ::first-letter 擬似要素は、ブロックレベルの要素にのみ適用されます。

次のプロパティは、::first-letter 擬似要素に適用されます:

##Padding プロパティ
#Border 属性
text-decoration
##vertical-align (「float」が「none」の場合のみ)
text-transform
line-height
float
clear
#例: すべての
要素の最初の行をスタイルする

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

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

</body>
</html>

ログイン後にコピー

::before および ::after 擬似要素

css3 擬似要素セレクターとは何ですか?

::before 擬似要素を使用して、要素のコンテンツの前にコンテンツを挿入できます。

::after 擬似要素を使用すると、要素のコンテンツの後にコンテンツを挿入できます。

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

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

	<body>

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


	</body>
</html>

ログイン後にコピー

::selection 擬似要素 css3 擬似要素セレクターとは何ですか?

::selection 擬似要素は次の部分と一致しますユーザーが選択した要素。次の CSS プロパティを ::selection に適用できます:

color

background
cursor
outline

次の例では、選択したテキストが黄色の背景に赤色で表示されます。 ## 例:

<!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>

ログイン後にコピー

(学習ビデオ共有:

css ビデオチュートリアル

)



選択した要素のコンテンツの前にコンテンツを挿入します。 (挿入するコンテンツを指定するには、 content 属性を使用します)	p::before	各要素の前にコンテンツを挿入します。
は、指定されたセレクターの最初の文字を選択するために使用されます。	p::first-letter	各要素の最初の文字を選択します。
は、指定されたセレクターの最初の行を選択するために使用されます。	p::first-line	各要素の最初の行を選択します。
ユーザーが選択した選択部分と一致します。 (サポートされている属性は、色、背景、カーソル、およびアウトラインです。)	p::selection	ユーザーが選択した要素の部分を選択します。