CSS 의사 클래스와 의사 요소 간의 비교 분석

이 기사에서는 CSS 의사 클래스와 의사 요소 간의 비교 분석을 공유합니다. 관심 있는 친구는 이 기사의 내용을 살펴보세요.

Pseudo-classes

Pseudo-classes는 HTML 문서의 특정 부분을 선택하는 방법으로, 원칙적으로 HTML 문서 트리 자체 및 해당 요소나 이름, 속성 또는 특성과 같은 특성을 기반으로 하지 않습니다. 콘텐츠이지만 언어 인코딩이나 요소의 동적 상태와 같은 기타 추상적 조건에 따라 달라집니다.

원래 의사 클래스는 시간이 지남에 따라 또는 사용자 개입을 통해 들어오고 나가는 요소의 동적 상태를 정의합니다. CSS2는 이 개념을 확장하여 가상 개념의 문서 구성 요소나 첫 번째 자식과 같은 문서 트리의 추론된 부분을 포함했습니다. 의사 클래스는 다양한 요소에 환상 클래스를 추가하는 것과 동일하게 작동합니다.

제한 사항: 의사 요소와 달리 의사 클래스는 선택기 체인의 어느 곳에나 나타날 수 있습니다.

예제 의사 클래스 코드:

a:link /* 选择未访问过的“a”元素*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* 字体颜色为黑 */
background-color : #99FF99; /* 设置为淡绿色*/
border-top : 2px solid #ccffcc; /* highlight color */
border-left : 2px solid #ccffcc; /* highlight color */
border-bottom : 2px solid #003300; /* shadow color */
border-right : 2px solid #003300; /* shadow color */
}
a:visited /* 这将选择任何已访问其目标的“a”元素。*/
{ padding : 4px;
text-decoration : none;
color : #000000; /* black text color */
background-color : #ccccff; /* set to a lavender */
border-top : 2px solid #ffffff; /* highlight color */
border-left : 2px solid #ffffff; /* highlight color */
border-bottom : 2px solid #333366; /* shadow color *
border-right : 2px solid #333366; /* shadow color */
}
a:hover /* 这将选择处于悬停状态的任何“a”元素。这是指针在元素的渲染区域内移动期间的状态。用户指定元素但不激活它。 */
{
color : #000000; /* black text color */
background-color : #99cc99; /* desaturated color */
border-top : 2px solid #003300; /* shadow color */
border-left : 2px solid #003300; /* shadow color */
border-bottom : 2px solid #ccffcc; /* highlight color */
border-right : 2px solid #ccffcc; /* highlight color */
}
a:focus /* 这将选择当前具有焦点的任何“a”元素。焦点是元素接受键盘输入或其他形式的文本输入的状态。 */
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ffff99; /* set to a pastel yellow */
border-top : 2px solid #ffffcc; /* highlight color */
border-left : 2px solid #ffffcc; /* highlight color */
border-bottom : 2px solid #666633; /* shadow color */
border-right : 2px solid #666633; /* shadow color */
}
a:active /*这将选择处于激活状态的任何“a”元素。活动是指针激活期间的状态（例如：按下并释放鼠标）在元素的渲染区域内*/
{
padding : 4px;
text-decoration : none;
width : 10%;
color : #000000; /* black text color */
background-color : #ff99ff; /* set to a pink */
border-top : 2px solid #ffccff; /* highlight color */
border-left : 2px solid #ffccff; /* highlight color */
border-bottom : 2px solid #663366; /* shadow color */
border-right : 2px solid #663366; /* shadow color */
}

의사 요소

의사 요소는 요소의 하위 부분을 처리하는 데 사용됩니다. 이를 통해 문서에 지정된 것 이상으로 요소 콘텐츠의 일부에 스타일을 설정할 수 있습니다. 즉, 실제로 문서 요소 트리에 없는 논리적 요소를 정의할 수 있습니다. 논리적 요소를 사용하면 CSS 선택기에서 암시적 의미 구조를 처리할 수 있습니다.

제한 사항: 의사 요소는 인라인 스타일이 아닌 외부 및 문서 수준 컨텍스트에만 적용할 수 있습니다. 의사 요소는 규칙에 나타날 수 있는 위치로 제한됩니다. 선택기 체인의 끝(선택기 제목 뒤)에만 나타날 수 있습니다. 선택기에서 찾은 클래스 또는 ID 이름 뒤에 표시되어야 합니다. 선택기당 하나의 의사 요소만 지정할 수 있습니다. 단일 요소 구조에서 여러 의사 요소를 처리하려면 여러 스타일 선택기/선언문을 만들어야 합니다.

의사 요소는 이니셜 대문자 및 드롭 캡과 같은 일반적인 인쇄 효과에 사용될 수 있습니다. 또한 소스 문서에 존재하지 않는 생성된 콘텐츠를 처리할 수도 있습니다("이전" 및 "이후" 사용). 다음은 속성과 값이 추가된 일부 의사 요소가 포함된 스타일시트 예시입니다.

아아아아

위 내용은 CSS 의사 클래스와 의사 요소 간의 비교 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!