CSS 의사 클래스

CSS 의사 클래스

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

Syntax

의사 클래스 구문:

selector:pseudo-class {property:value;}

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

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

anchor pseudo-class

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

예제

      <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        a:link {color:#FF0000;}    /* 未访问的链接 */
        a:visited {color:#00FF00;} /* 已浏览过的链接 */
        a:hover {color:#FF00FF;}   /* 鼠标划过的链接 */
        a:active {color:#0000FF;}  /* 已选中的链接 */
    </style>
</head>

<body>
<p><b><a href="" 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>

Note에 대해 조금 배웠습니다. a:hover는 a:link와 a:visited 뒤에 와야 하며, 다음을 보려면 엄격한 순서를 따라야 합니다. 효과.

참고: a:active는 a:hover 뒤에 와야 합니다.

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

프로그램을 실행하고 사용해 보세요

의사 클래스 및 CSS 클래스

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

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

< ;a 클래스 ="red" href="css-syntax.html ">CSS 구문</a>

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

Instance

Use :focus

  <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php中文网(php.cn)</title>
    <style>
        input:focus
        {
            background-color:yellow;
        }
    </style>
</head>

<body>
<form action="" method="get">
    姓名: <input type="text" name="fname" /><br>
    留言: <input type="text" name="content" /><br>
    <input type="submit" value="Submit" />
</form>


</body>
</html>

프로그램을 실행하여 시험해 보세요

모든 CSS 의사 클래스/요소

이외의 모든 요소를 선택합니다. 의 두 하위 요소 :before:after언어p:lang(it)

Selector	Example	예제 설명
:checked	input:checked	선택한 모든 양식 요소 선택
:disabled	input:disabled	비활성화된 모든 양식 요소 선택
:empty	p:empty	하위 요소가 없는 모든 p 요소 선택
:enabled	input:enabled	활성화된 모든 양식 요소 선택
:first-of- type	p:first-of-type	p 요소인 각 상위 요소의 첫 번째 p 하위 요소를 선택합니다
:in-range	input:in-range	지정된 범위 내의 요소를 선택합니다. 값
: 유효하지 않음	입력: 유효하지 않음	유효하지 않은 모든 요소 선택
: 마지막 하위	p: 마지막 하위	모든 p 요소의 마지막 하위 요소 선택
: 마지막 유형	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)	Select 마지막에서 두 번째 하위 요소가 p
:nth-of-type(n)	p:nth-of-type(2)	인 모든 p 요소 선택 p
:only-of-type	p:only-of-type	p
:only-child	p :only-child	다음을 포함하는 모든 p 요소를 선택하세요. 하나의 하위 요소만
:선택적	input:선택적	"필수" 속성이 없는 요소를 선택하세요
:out-of-range	input :out-of-range	다음을 포함하는 요소 속성을 선택하세요. 지정된 범위를 벗어난 값
:읽기 전용	input:읽기 전용	읽기 전용 속성이 있는 요소 속성 선택
:읽기-쓰기	input:읽기-쓰기	Select 읽기 전용 속성이 없는 요소 속성
:required	input:required	"필수" 속성으로 지정된 요소 속성을 선택하세요
:root	root	document
: target	#news: target	현재 활성화된 #news 요소를 선택합니다(앵커 이름이 포함된 URL을 클릭하세요)
:valid	input:valid	유효한 값이 있는 모든 속성 선택
:link	a:link	방문하지 않은 링크 모두 선택
:visited	a:visited	선택 모든 방문한 링크
:active	a:active	활성 링크 선택
:hover	a:hover	링크 위에 마우스를 놓습니다.
:focus	입력:focus	입력 후 포커스를 둘 요소 선택
:first-letter	p:first-letter	각 <p> 요소의 첫 글자 선택
:first-line	p:first -line	각 <p> 요소의 첫 번째 줄을 선택합니다.
:first-child	p:first-child	선택기는 모든 요소 <]p>의 첫 번째 하위 요소와 일치합니다.
p:before	각 <p> 요소 앞에 콘텐츠를 삽입합니다
p:after	에서 각 <p> 요소 뒤에 콘텐츠를 삽입합니다. (	)
<p> 요소

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <style> input:focus { background-color:yellow; } </style> </head> <body> <form action="" method="get"> 姓名: <input type="text" name="fname" /><br> 留言: <input type="text" name="content" /><br> <input type="submit" value="Submit" /> </form> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear