CSS3 의사 요소 선택기란 무엇입니까?-프런트엔드 Q&A-php.cn

CSS3 의사 요소 선택기란 무엇입니까?

青灯夜游

풀어 주다： 2021-12-16 11:45:09

원래의

2932명이 탐색했습니다.

css3 의사 요소 선택기에는 다음이 포함됩니다. 1. "::after", 선택한 요소의 내용 뒤에 내용을 삽입합니다. 2. "::before", 선택한 요소의 내용 앞에 내용을 삽입합니다. 3. ":: 첫 글자"; 4. "::첫 번째 줄"; 5. "::선택".

CSS3 의사 요소 선택기란 무엇입니까?

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

CSS 의사 요소는 요소의 지정된 부분에 스타일을 지정하는 데 사용됩니다.

예를 들어 다음과 같이 사용할 수 있습니다.

요소의 첫 글자와 첫 줄의 스타일 설정
요소 콘텐츠 앞이나 뒤에 콘텐츠 삽입

css3 pseudo -요소 선택기는

Selector	Description	Example	Example Description
::after	선택한 요소의 내용 뒤에 내용을 삽입합니다. (삽입할 내용을 지정하려면 content 속성을 사용하세요.)	p::after	각 요소 뒤에 내용을 삽입하세요.
::before	선택한 요소의 콘텐츠 앞에 콘텐츠를 삽입하세요. (삽입할 콘텐츠를 지정하려면 content 속성을 사용하세요.)	p::before	각 요소 앞에 콘텐츠를 삽입하세요.
::first-letter	은 지정된 선택기의 첫 글자를 선택하는 데 사용됩니다.	p::first-letter	각 요소의 첫 글자를 선택합니다.
::first-line	은 지정된 선택기의 첫 번째 줄을 선택하는 데 사용됩니다.	p::first-line	각 요소의 첫 번째 줄을 선택합니다.
::selection	사용자가 선택한 선택 부분과 일치합니다. (지원되는 속성은 색상, 배경, 커서, 윤곽선입니다.)	p::selection	요소 중 사용자가 선택한 부분을 선택합니다.

::first-line pseudo-element

::first-line pseudo-element는 텍스트의 첫 번째 줄에 특별한 스타일을 추가하는 데 사용됩니다.

참고: ::첫 번째 줄 의사 요소는 블록 수준 요소에만 적용할 수 있습니다.

다음 속성은 ::첫 번째 줄 의사 요소에 적용됩니다.

글꼴 속성
color 속성
배경 속성
word-spacing
letter-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 의사 요소 선택기란 무엇입니까?

배경 속성

margin 속성

padding 속성

Border 속성

text-꾸밈
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 의사 요소
::before 의사 요소 사용 가능 요소 콘텐츠 앞에 일부 콘텐츠를 삽입합니다.

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

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

	<body>

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


	</body>
</html>

로그인 후 복사

::selection 의사 요소

::selection 의사 요소는 사용자가 선택한 요소의 일부와 일치합니다.

다음 CSS 속성을 ::selection에 적용할 수 있습니다.

CSS3 의사 요소 선택기란 무엇입니까?

color

Background

cursor CSS3 의사 요소 선택기란 무엇입니까?

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>

로그인 후 복사