CSS 대상 의사 클래스는 무엇입니까?-CSS 튜토리얼-php.cn

CSS 대상 의사 클래스는 무엇입니까?

青灯夜游

풀어 주다： 2020-11-13 14:17:12

원래의

2674명이 탐색했습니다.

CSS에서 대상 의사 클래스는 ":target"이고 구문 형식은 "E:target{css style}"입니다. 이는 E와 일치하는 모든 요소가 선택되고 일치하는 요소가 관련 URL; 이 선택기는 동적 선택입니다. 스타일 효과는 일치하는 요소를 가리키는 URL이 있는 경우에만 유효합니다.

CSS 대상 의사 클래스는 무엇입니까?

(권장 튜토리얼: CSS 비디오 튜토리얼)

Css에서 대상 의사 클래스 선택기는 ":target"입니다. 이는 CSS3의 많은 동적 의사 클래스 선택기 중 하나이며 다음에 사용됩니다. 앵커 일치 활성 HTML 앵커를 강조 표시하는 요소를 가리킵니다.

구문:

E:target{css样式}

로그인 후 복사

은 E와 일치하는 모든 요소를 선택하고, 일치하는 요소를 해당 URL로 가리킨다는 의미입니다. 이 선택기는 동적 선택기이며 스타일 효과는 일치하는 요소를 가리키는 URL이 있는 경우에만 효과적입니다. CSS에서 "

:target"이 적용되는 과정은 다음과 같습니다. 브라우저 주소의 해시(주소에서 # 기호 다음 부분)가 :target 의사 선택기에 지정된 ID와 일치하면 해당 스타일이 이 ID 요소에 적용하세요.

예:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<style>
			/* would apply to all targetted elements */
			
			:target {
				color: #000;
			}
			/* applies to H2&#39;s */
			
			h2:target {
				color: #f00;
			}
		</style>
	</head>

	<body>
		<div>

			<p>点击下面的链接，你会看到浏览器地址是hash值的变化，以及相应链接的CSS样式变化！这是:target伪选择器在起作用。</p>
			<p>
				<a href="#anchor">Heading 1</a> |<br>
				<a href="#anchor2">Heading 2</a> | </p>
			<h2 id="anchor">Anchor 1</h2>
			<h2 id="anchor2">Anchor 2</h2>
		</div>
	</body>

</html>

로그인 후 복사

렌더링:

CSS 대상 의사 클래스는 무엇입니까?