CSS 의사 클래스

CSS 의사 클래스는 선택기에 몇 가지 특수 효과를 추가하는 데 사용됩니다.

구문

의사 클래스 구문:

selector:pseudo-class {property:value;}

CSS 클래스도 의사 클래스를 사용할 수 있습니다:

selector.class:pseudo-class { property: value;}

anchor pseudo-class

CSS를 지원하는 브라우저에서는 링크의 다양한 상태가 다양한 방식으로 표시될 수 있습니다

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a:link {color:#FF0000;}    /* unvisited link */
a:visited {color:#00FF00;} /* visited link */
a:hover {color:#FF00FF;}   /* mouse over link */
a:active {color:#0000FF;}  /* selected link */
</style>
</head>

<body>
<p><b><a href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">这是一个链接</a></b></p>
<p><b>注意：</b> a:hover 必须在 a:link 和 a:visited 之后，需要严格按顺序才能看到效果。</p>
<p><b>注意：</b> a:active 必须在 a:hover 之后。</p>
</body>
</html>

인스턴스 실행»

"실행"을 클릭하세요. 온라인 예제를 보려면 인스턴스" " 버튼을 누르세요.

참고: CSS 정의에서 a:hover는 a:link 및 a:visited 뒤에 배치되어야 적용됩니다.

참고: CSS 정의에서 a:active는 a:hover 뒤에 배치되어야 유효합니다.

참고: 의사 클래스 이름은 대소문자를 구분하지 않습니다.

의사 클래스 및 CSS 클래스

의사 클래스는 CSS 클래스와 함께 사용할 수 있습니다:

a.red:visited {color:#FF0000;}

<a class="red" href="css-syntax .html">CSS 구문</a>

위 예시의 링크를 방문했다면 빨간색으로 표시됩니다.

CSS - :first - child pseudo-class

:first-child pseudo-class를 사용하여 요소의 첫 번째 자식 요소를 선택할 수 있습니다

참고: 이전 버전의 IE8에서는 <!DOCTYPE> ; 선언해야 합니다. 이렇게 하면 첫 번째 자식이 적용됩니다.

첫 번째 요소와 일치합니다.

아래 예에서 선택기는 모든 요소의 첫 번째 하위인 요소와 일치합니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-child
{
	color:blue;
} 
</style>
</head>

<body>
<p>This is some text.</p>
<p>This is some text.</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.</p>
</body>
</html>

실행 예시 »

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.

첫 번째 요소와 일치하는 모든 요소를 일치시킵니다.

아래 예제에서 첫 번째 < ;i> 요소의 요소:

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p > i:first-child
{
	color:blue;
} 
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当 :first-child 作用于 IE8以及更早版本的浏览器,  DOCTYPE必须已经定义.</p>
</body>
</html>

예제 실행»

온라인 예를 보려면 "인스턴스 실행" 버튼을 클릭하세요

첫 번째 하위 요소인 모든 와 일치합니다. ; 모든 요소 내의 요소

아래 예에서 선택기는 요소의 첫 번째 하위인 요소 내의 모든 요소와 일치합니다.
예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

CSS - :lang pseudo-class

:lang pseudo-class를 사용하면 다양한 언어에 대한 특수 규칙을 정의할 수 있습니다

참고: IE8은 ;lang 의사 클래스를 지원하려면 <!DOCTYPE>을 선언해야 합니다.

다음 예에서 :lang 클래스는 속성 값 no를 사용하여 q 요소에 대한 따옴표 유형을 정의합니다.

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
p:first-child i
{
	color:blue;
} 
</style>
</head>

<body>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p>I am a <i>strong</i> man. I am a <i>strong</i> man.</p>
<p><b>注意:</b> 当:first-child 作用于 IE8及更早版本的浏览器, DOCTYPE 必须已经定义.</p>
</body>
</html>

Run Instance»

보려면 "인스턴스 실행" 버튼을 클릭하세요. 온라인 예제

추가 예제

예: 하이퍼링크에 다양한 스타일 추가

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
q:lang(no)
{
	quotes: "~" "~";
}
</style>
</head>

<body>
<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>
<p>在这个例子中,:lang定义了q元素的值为lang =“no”</p>
<p><b>注意:</b> 仅当 !DOCTYPE已经声明时 IE8支持 :lang.</p>
</body>
</html>

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요

이 예제는 다음을 보여줍니다. 하이퍼링크를 추가하는 방법 기타 스타일.

인스턴스: :focus

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<style>
a.one:link {color:#ff0000;}
a.one:visited {color:#0000ff;}
a.one:hover {color:#ffcc00;}

a.two:link {color:#ff0000;}
a.two:visited {color:#0000ff;}
a.two:hover {font-size:150%;}

a.three:link {color:#ff0000;}
a.three:visited {color:#0000ff;}
a.three:hover {background:#66ff66;}

a.four:link {color:#ff0000;}
a.four:visited {color:#0000ff;}
a.four:hover {font-family:monospace;}

a.five:link {color:#ff0000;text-decoration:none;}
a.five:visited {color:#0000ff;text-decoration:none;}
a.five:hover {text-decoration:underline;}
</style>
</head>

<body>
<p>将鼠标移至链接上改变样式.</p>

<p><b><a class="one" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes color</a></b></p>
<p><b><a class="two" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-size</a></b></p>
<p><b><a class="three" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes background-color</a></b></p>
<p><b><a class="four" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes font-family</a></b></p>
<p><b><a class="five" href="http://www.php.cn/css/css-css_tutorial.html" target="_blank">This link changes text-decoration</a></b></p>
</body>

</html>

를 사용하여 인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

이 예제에서는 :focus 의사 클래스를 사용하는 방법을 보여줍니다.

모든 CSS 의사 클래스/요소

:이전p:lang(it) 요소의 lang 속성에 대한 시작 값을 선택하세요

← CSS 조합 선택기

CSS 의사 요소 →

제출하다

PHP 중국어 웹사이트

selector	Example	설명 예
:checked	input:checked	선택한 모든 양식 요소 선택
:비활성화됨	input:disabled	비활성화된 양식 요소 모두 선택
:empty	p:empty	하위 요소가 없는 모든 p 요소 선택
:enabled	input:enabled	선택 활성화된 모든 양식 요소
:first-of-type	p:first-of-type	p 요소인 각 상위 요소의 첫 번째 p 하위 요소를 선택하세요
:in-range	input:in-range	요소의 지정된 범위 내의 값을 선택합니다
:invalid	input:invalid	모든 잘못된 요소를 선택합니다
:last-child	p :last-child	모든 p 요소 중 마지막 하위 요소를 선택합니다
:last-of-type	p:last-of-type	부모 요소의 마지막인 모든 p 요소를 선택합니다. p 요소
:not(selector)	:not(p)	은 p
:nth-child(n)	p:nth-child( 2)	모든 p 요소 중 두 번째 하위 요소 선택
:nth-last-child(n)	p:nth-last-child(2)	모든 요소 중 마지막에서 두 번째 하위 요소 선택 p 요소 하위 요소
:nth-last-of-type(n)	p:nth-last-of-type(2)	모든 p 요소에 대해 p의 마지막에서 두 번째 하위 요소를 선택하세요.
:nth-of-type(n)	p:nth-of-type(2)	두 번째 하위 요소가 p
:only-of- type인 모든 p 요소를 선택하세요.	p:only-of-type	하위 요소가 하나만 있는 모든 요소 선택 p
:only-child	p:only-child	하위 요소가 하나만 있는 모든 요소 선택 p 요소
:선택적	input:선택적	"필수" 없이 요소 속성을 선택하세요.
:out-of-range	input:out-of-range	지정된 범위 밖의 값을 선택하세요. 요소 속성
:읽기 전용	input:읽기 전용	읽기 전용 속성이 있는 요소 선택
:read-write	input:read-write	읽기 전용 속성이 없는 요소 선택 속성
:required	input:required	"필수" 속성 Attributes
:root	root	문서의 루트 요소 선택
:대상	#news:target	현재 활성인 #news 요소를 선택합니다(클릭 URL에 앵커 이름이 포함되어 있음)
:valid	input:valid	유효한 값이 있는 모든 속성 선택
:link	a:link	방문하지 않은 링크 모두 선택
:visited	a:visited	방문한 모든 링크 선택
:active	a:활성	select Active Link
:hover	a:hover	링크에 마우스를 올려놓은 상태
:focus	input:focus	선택한 요소에 입력 후 포커스가 있습니다.
:first-letter	p:first-letter	는 각 <p> 요소
:first-line	p:first-line	selects 각 < ;p> 요소의 첫 번째 줄
:first-child	p:first-child	선택기는 모든 요소의 첫 번째 하위 요소인 <]p>
p:before	각 <p> 요소 앞에 콘텐츠를 삽입하세요
:after	p:after	각 <p> 뒤에 콘텐츠를 삽입하세요
: lang( 언어 )

CSS 의사 클래스