CSS는 문서 트리 이외의 정보 형식을 지정하기 위해 의사 클래스 및 의사 요소의 개념을 도입합니다. 즉, 의사 클래스와 의사 요소는 문장의 첫 글자나 목록의 첫 번째 요소 등 문서 트리에 없는 부분을 수정하거나 특정 항목 위에 마우스를 올렸을 때 사용됩니다. 하이퍼링크가 켜져 있을 때 설정할 스타일입니다.
의사 요소란 무엇입니까?
의사 요소: 문서 트리에 없는 일부 요소를 만들고 스타일을 추가하는 데 사용됩니다. 실제로 의사 요소는 특정 요소 전후에 일반 선택자로 수행할 수 없는 작업입니다. 컨트롤의 내용은 요소와 동일하지만 그 자체는 요소 기반 추상화이며 문서 구조에 존재하지 않습니다. 예를 들어 :before를 사용하여 요소 앞에 텍스트를 추가하고 이 텍스트에 스타일을 추가할 수 있습니다.
요소 특성
1. 장점:
(1) DOM 노드를 점유하지 않고 DOM 노드 수를 줄입니다.
(2) CSS가 일부 JavaScript 문제를 해결하고 개발을 단순화하도록 돕습니다.
(3) 의미 없는 페이지 요소를 추가하지 마세요.
2. 단점:
(1) 디버깅에 도움이 되지 않습니다.
(2) 의사요소는 실제로 문서 내용에 반영되지 않고 시각적 효과에만 반영되므로 의사요소에 실용적인 내용을 추가할 수 없으며, 이 부분의 내용은 검색엔진에서 크롤링되지 않습니다.
CSS는 다음 표에 표시된 것처럼 일련의 의사 요소를 제공합니다.
1.::후
가상 요소::after는 지정된 요소 뒤에 일부 콘텐츠를 삽입할 수 있습니다. ::after에서는 추가할 콘텐츠를 정의하기 위해 content 속성을 사용해야 하고, ::after에서는 적용하려면 content 속성을 정의해야 합니다. (콘텐츠를 삽입할 필요가 없습니다.) 콘텐츠 속성의 값은 비어 있다고 정의할 수 있습니다.
2. ::이전
pseudo-element::before는 지정된 요소 앞에 일부 내용을 삽입할 수 있습니다. ::after와 유사하게, 추가할 내용을 정의하기 위해서는 ::before에서도 content 속성을 사용해야 하며, 적용하려면 ::before에서 content 속성을 정의해야 합니다(삽입할 내용이 없는 경우, content 속성의 값은 null로 정의될 수 있습니다.
3. ::첫 글자
의사 요소::첫 번째 문자는 지정된 요소에 있는 콘텐츠의 첫 번째 문자 스타일을 설정하는 데 사용됩니다. 일반적으로 글꼴 크기 및 부동 속성과 함께 사용되어 첫 글자 장식 효과를 만듭니다. 의사 요소 ::first-letter는 블록 수준 요소에만 사용할 수 있습니다. 인라인 요소가 이 의사 요소를 사용하려면 먼저 블록 수준 요소로 변환해야 합니다.
4. ::첫 번째 줄
의사 요소::first-line은 지정된 요소의 콘텐츠 첫 번째 줄 스타일을 설정하는 데 사용됩니다. ::first-letter와 마찬가지로 의사 요소::first-line은 블록 수준 요소에만 사용할 수 있습니다. 인라인 요소에서는 이 의사 요소를 사용하려면 먼저 이를 블록 수준 요소로 변환해야 합니다.
5. ::선택
의사 요소::선택은 개체가 선택될 때 스타일을 설정하는 데 사용됩니다. 의사 요소::선택은 요소가 선택될 때 색상, 배경, 커서, 윤곽선 및 텍스트 그림자만 정의할 수 있다는 점에 유의해야 합니다(IE11). 아직 지원하지 않습니다. 이 속성) 및 기타 속성을 정의합니다.
6. :: 자리표시자
의사 요소::placeholder는 양식 요소(<input>, <textarea> 요소)의 자리 표시자 텍스트(HTML의 자리 표시자 속성을 통해 설정된 텍스트)를 설정하는 데 사용됩니다.