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가 적용되도록 1a309583e26acea4f04ca31122d8c535을 선언해야 합니다.
첫 번째 e388a4556c0f65e1904146cc1a846bee 요소와 일치합니다.
아래 예에서 선택기는 모든 요소의 첫 번째 하위인 e388a4556c0f65e1904146cc1a846bee 요소와 일치합니다.
Instance
p:first-child { color:blue; }
는 모든 e388a4556c0f65e1904146cc1a846bee
요소의 ;i> 요소는 첫 번째 5a8028ccc7a7e27417bff9f05adf5932 요소와 일치하는 모든 e388a4556c0f65e1904146cc1a846bee 요소를 선택합니다.
Instance
p > i:first-child { color:blue; }
첫 번째 5a8028ccc7a7e27417bff9f05adf5932 요소와 일치합니다. 하위 요소인 e388a4556c0f65e1904146cc1a846bee 요소
에서 선택기는 모든 5a8028ccc7a7e27417bff9f05adf5932 요소와 일치합니다.
Instance
p:first-child i { color:blue; }
CSS - :lang pseudo-class
:lang 의사 클래스를 사용하면 다양한 언어에 대한 특수 규칙을 정의할 수 있습니다.
참고: IE8에서는 이를 지원하기 위해 1a309583e26acea4f04ca31122d8c535을 선언해야 합니다.
다음 예에서 :lang 클래스는 속성 값이 no인 q 요소에 대한 따옴표 유형을 정의합니다.
Example
q:lang(no) {quotes: "~" "~";}
위 내용은 CSS 의사 클래스를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!