CSS 의사 클래스

CSS 의사 클래스 -- 의사 클래스

CSS 의사 클래스는 CSS 선택기의 일부입니다.

의사 클래스 이름은 언어에 따라 구분됩니다. HTML에서 문서는 대소문자를 구분하지 않지만 XML 문서는 대소문자를 구분합니다.

영어의 의사 클래스는 의사 클래스입니다

CSS의 스타일 간 연결 HTML 문서의 요소는 일반적으로 문서 위치의 요소를 기반으로 하며 이 접근 방식은 대부분의 요구 사항을 충족합니다. 그러나 HTML 문서 구조의 한계로 인해 특정 사용자 작업에 의해 트리거되는 이벤트와 같은 일부 효과를 얻을 수 없습니다. 다음은 몇 가지 예입니다.

사용자가 HTML 요소 위로 마우스를 이동할 때

HTML 요소 나가기

HTML 요소 클릭

의사 클래스는 사용자의 마우스 클릭과 같은 문서 상태 변경, 동적 이벤트 등에 사용할 수 있습니다. 요소 및 방문하지 않은 링크

유사 클래스는 이름, 속성 또는 내용이라는 세 가지 특성을 통해 요소를 분류합니다. 원칙적으로 HTML 문서에서는 얻을 수 없는 기능입니다

CSS :link pseudo-class

:link -- CSS :link pseudo-class, 아직 존재하지 않는 링크에 적합 사용자가 방문함

구문: :link

CSS 버전: CSS1

설명:

은 링크에 적합합니다. 사용자가 방문하지 않은 페이지

사용자 터미널(예: 브라우저)은 일반적으로 방문하지 않은 링크와 방문한 링크를 다르게 표시합니다. CSS는 두 상태의 링크를 구별하기 위해 의사 클래스 :link 및 :visited를 제공합니다.

방문하지 않은 링크와 방문한 링크는 상호 배타적입니다.

링크(중국어로 "링크"를 의미)

지정된 링크의 색상 설정:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :link 伪类示例，对指定链接设置颜色</title>
<style type="text/css" media="all">
a.dreamdu:link
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://www.php.cn">点击跳转</a></p>
<p><a class="dreamdu" href="http://www.php.cn">点击跳转</a></p>
<p><a href="http://www.php.cn">点击跳转</a></p>
</body>
</html>

CSS: 방문함 가상 클래스

구문: :visited

CSS 버전: CSS1

참조 URL: http://www.dreamdu.com/ css/pseudo -class_visited/

설명:

사용자가 방문한 링크에 적용

사용자 단말기(예: 브라우저)에는 일반적으로 방문하지 않은 링크와 방문한 링크가 표시됩니다. 링크의 경우 CSS는 두 상태 링크를 구별하기 위해 의사 클래스 :link 및 :visited를 제공합니다.

방문하지 않은 링크와 방문한 링크는 상호 배타적입니다.

방문, 중국어 "방문" 의미

구문

:visited

a:visited

a.class:visited

예

a:visited

{

color: green;

}

위에 정의된 방문 링크 스타일은 녹색

문서 언어에 따라 결정됩니다. 어떤 요소가 하이퍼링크의 소스 체인인지. 예를 들어 HTML에서 링크 의사 클래스는 href 속성이 있는 요소에 적용됩니다. 따라서 다음 두 CSS 선언은 동일합니다.

a:visited

{

color: green;

}

:visited

{

color: green;

}

팁: 방문한 링크에 대해 브라우저는 방문 정보를 기록합니다. 아래 예시를 보기 전에 브라우저에 캐시된 데이터를 삭제하세요.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>CSS :visited 伪类示例，设置已访问链接的颜色</title>
<style type="text/css" media="all">
a:link
{
color:red;
}
a:visited
{
color:green;
}
</style>
</head>
<body>
<p><a href="http://www.php.cn">点击跳转</a></p>
<p><a href="http://www.php.cn">点击跳转</a></p>
</body>
</html>

CSS :hover 의사 클래스

는 요소를 가리키는 커서(마우스 포인터)에 적합하지만 이 요소는 그렇지 않습니다. 활성화 시 스타일

구문: :hover

CSS 버전: CSS2

설명:

커서(마우스 포인터)가 요소를 가리키고 있지만 해당 요소가 활성화되지 않은 경우에 적용

클라이언트(브라우저)는 사용자의 상호 작용에 따라 렌더링 효과를 변경할 수 있습니다. CSS는 이러한 상황에 대해 hover, active, focus의 세 가지 의사 클래스를 제공합니다.

위의 세 가지 의사 클래스는 그렇지 않습니다. 상호 배타적이며 하나의 요소가 여러 요소에 동시에 적용될 수 있습니다.

:hover 의사 클래스는 사용자가 마우스로 단락 p를 가리키는 것처럼 사용자가 요소를 가리킬 때 적용할 수 있습니다. 사용자가 마우스로 요소를 떠나면 요소의 원래 스타일 표시가 복원됩니다.

hover(중국어로 "머물다, 가리키다"를 의미)

구문

: hover

a:hover

a.class:hover

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS :hover 伪类示例</title>
<style type="text/css" media="all">
a:hover 
{
color:yellow;
background:blue;
font-size:small;
}
p:hover
{
color:yellow;
background:blue;
font-size:large;
}
div:hover
{
color:red;
background:lime;
font-size:small;
}
</style>
</head>
<body>
<a href="http://www.php.cn">点击跳转</a>
<p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p>
<div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</div>
</body>
</html>

앵커 의사 클래스

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

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>CSS :anchor 伪类示例</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="#" 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 to 뒤에 배치되어야 합니다. 효과적이다.

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

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

CSS :first-child 의사 클래스

구문: :first-child

CSS 버전: CSS2

참조 URL: http://www.dreamdu.com/css/pseudo-class_first-child/

설명:

는 다른 요소의 첫 번째 하위 요소와 일치합니다. 예: div에서 여러 p 요소를 포함하면 첫 번째 자식 의사 클래스를 사용하여 첫 번째 p 요소와 일치시킬 수 있습니다.

first는 중국어로 "첫 번째"를 의미합니다. child는 중국어로 "자손, 자식 노드"를 의미합니다.

구문

:first-child

E:first-child

E1>E2: first-child

예

p > 코드:첫 번째-자식

{

color:lime;

배경:red;

}

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>php中文网</title> 
<style>
p:first-child
{
color:blue;
} 
</style>
</head>
<body>
<p>这是个测试</p>
<p>这是个测试</p>
<p><b>注意:</b>对于 :first-child 工作于 IE8以及更早版本的浏览器, DOCTYPE必须已经声明.</p>
</body>
</html>

CSS :lang 의사 클래스

: lang 의사 클래스는 다양한 언어에 대한 특수 규칙을 정의하는 기능을 제공합니다.

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

아아아아

지속적인 학습

새로운 파일

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS :hover 伪类示例</title> <style type="text/css" media="all"> a:hover { color:yellow; background:blue; font-size:small; } p:hover { color:yellow; background:blue; font-size:large; } div:hover { color:red; background:lime; font-size:small; } </style> </head> <body> <a href="http://www.php.cn">点击跳转</a> <p>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</p> <div>IE6、IE7(Q)、IE8(Q)不支持除了连接之外元素的hover伪类</div> </body> </html>

제출하다 코드 재설정

자동운전