CSS 의사 클래스를 사용하는 방법

CSS 의사 클래스를 사용하는 방법은 무엇입니까?

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

의사 클래스 구문:

selector:pseudo-class {property:value;}

CSS 클래스는 또한 의사 클래스를 사용할 수 있습니다:

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

anchor pseudo-class

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

예

a:link {color:#FF0000;} /* 未访问的链接 */
a:visited {color:#00FF00;} /* 已访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标划过链接 */
a:active {color:#0000FF;} /* 已选中的链接 */

참고: 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의 이전 버전에서는 :first-child가 적용되도록 을 선언해야 합니다.

첫 번째

요소와 일치합니다.

아래 예에서 선택기는 모든 요소의 첫 번째 하위인

요소와 일치합니다.

Instance

p:first-child
{
    color:blue;
}

는 모든

요소의 ;i> 요소는 첫 번째 요소와 일치하는 모든

요소를 선택합니다.

Instance

p > i:first-child
{
    color:blue;
}

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

요소

에서 선택기는 모든 요소와 일치합니다.

Instance

p:first-child i
{
    color:blue;
}

CSS - :lang pseudo-class

:lang 의사 클래스를 사용하면 다양한 언어에 대한 특수 규칙을 정의할 수 있습니다. ​

참고: IE8에서는 이를 지원하기 위해 을 선언해야 합니다.

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

Example

q:lang(no) {quotes: "~" "~";}

위 내용은 CSS 의사 클래스를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!