CSS 공통 속성 의사 요소 및 의사 요소 요약

이전 시간에는 id 선택자와 클래스 선택자에 대해 각각 이야기했으며, 이들의 차이점과 연관성에 대해 함께 살펴보겠습니다.

사실 예전에는 의사 클래스와 의사 요소에 대해 헷갈렸는데, 이제 그 신비한 외투를 벗겨보기로 했습니다. 우선 의사 클래스란 무엇일까요? 의사 요소란 무엇입니까?

의사 클래스 및 의사 요소의 이해:

공식 설명:

의사 클래스는 처음에 일부 요소의 동적 상태를 나타내는 데 사용되었으며 일반적으로 일반적으로 사용되는 링크입니다. . 다양한 상태(링크, 활성, 마우스 오버, 방문)와 CSS2 표준
은 개념적 범위를 확장하여 논리적으로 존재하지만 문서 트리에서는 ID가 없는 모든 "고스트" 범주를 만듭니다.

의사 요소는 특정 요소의 하위 요소를 나타냅니다. 이 하위 요소는 논리적으로 존재하지만 우리가 일반적으로 사용하는 after, before 등 문서 트리에는 실제로 존재하지 않습니다. .

제가 대략적으로 이해한 바에 따르면 의사 클래스는 식별할 필요가 없는 클래스이고 의사 요소는 요소이지만 문서 트리에는 존재하지 않습니다.

사용 방법: 의사 클래스 앞에는 콜론이, 의사 요소 앞에는 콜론 두 개가 옵니다. E:첫 번째 자식 의사 클래스, E::첫 번째 줄 의사 요소. 이는 최신 CSS3 표준이지만 CSS2에서는
에서 after와 before 모두 콜론을 사용하므로 여기서는 다들 주의하셔야 합니다. 게다가 CSS3는 많은 가상 클래스를 확장했는데, 여기서는 언급하지 않겠습니다. 관심이 있으시면 직접 확인하실 수 있습니다.

일반적인 애플리케이션:
유사 클래스:
1.a 링크 스타일링크 클릭 a:hover{color:red} 마우스 호버 글꼴이 빨간색으로 변합니다.

2. 인터레이스 색상 변경

• 1
• 2
• 3
4

ul li:nth-child(even){Background-color:#ccc} 또는 ul li:nth-chilid(2):{Background-clolor:#ccc}

의사 요소 :
수레 청소:
.clear{zoom:1}
.clear:after{display:block;content:'';clear:both;}

의사 클래스 및 의사 요소(pseudo-elements), 지금은 여기까지입니다. 의사 클래스와 의사 요소에 관해서는 많은 흥미로운 효과를 얻을 수 있습니다.

CSS에서 일반적으로 사용되는 의사 요소 및 의사 요소에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!