CSS에서 의사 요소를 사용하는 방법 요약(코드)-CSS 튜토리얼-php.cn

CSS에서 의사 요소를 사용하는 방법 요약(코드)

不言

풀어 주다： 2018-08-24 11:55:08

원래의

1359명이 탐색했습니다.

이 기사는 CSS에서 의사 요소를 사용하는 방법에 대한 요약(코드)을 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

텍스트의 첫 글자를 특수 문자로 설정

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			p:first-letter {
				color:#ff0000;
				font-size:xx-large;
			}
		</style>
	</head>
	<body>
		<p>你可以使用"first-letter"伪元素向文本的首字母设置特殊样式；</p>
	</body>
</html>

로그인 후 복사

텍스트의 첫 번째 줄을 특수 문자로 설정

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			p:first-letter {
				color:#ff0000;
				font-size:xx-large;
			}
		</style>
	</head>
	<body>
		<p>你可以使用"first-letter"伪元素向文本的首字母设置特殊样式；</p>
	</body>
</html>

로그인 후 복사

텍스트의 첫 번째 줄의 첫 글자를 특수 문자로 설정

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			p:first-letter{
				color:#ff0000;
				font-size:xx-large;
			}
			p:first-line {
				color:#0000ff;
				font-variant:small-caps;
			}
		</style>
	</head>
	<body>
		<p>你可以结合使用"first-line"和"first-letter"伪元素向文本的首行和首字母设置特殊样式。</p>
	</body>
</html>

로그인 후 복사

사용법: 요소 앞에 일부 콘텐츠 삽입

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			h1:before {content:url(smiley.gif);}
		</style>
	</head>
	<body>
		<h1>This is a heading</h1>
		<p>The :before pseudo-element inserts content before an element.</p>
		<h1>This is a heading</h1>
		<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
	</body>
</html>

로그인 후 복사

사용법: 요소 뒤에 일부 콘텐츠 삽입

<!DOCTYPE html >
<html>
	<head>
		<meta charset="utf-8"> 
		<title>自学教程(如约智惠.com)</title> 
		<style >
			h1:after {content:url(smiley.gif);}
		</style>
	</head>
	<body>
		<h1>This is a heading</h1>
		<p>The :before pseudo-element inserts content before an element.</p>
		<h1>This is a heading</h1>
		<p><b>注意:</b>仅当 !DOCTYPE 已经声明 IE8 支持这个内容属性</p>
	</body>
</html>

로그인 후 복사