CSS 의사 클래스란 무엇입니까? CSS 의사 클래스에 대한 자세한 소개-CSS 튜토리얼-php.cn

초보이건 숙련된 CSS 개발자이건 아마도 의사 클래스(pseudo-class)에 대해 들어본 적이 있을 것입니다. 가장 유명한 의사 클래스는 아마도 :hover일 것입니다. 이를 통해 포인팅 장치(예: 마우스)가 요소를 가리킬 때 요소가 호버 상태에 있는 동안 요소의 스타일을 지정할 수 있습니다.

이전 margin: auto 및 CSS Floats에 대한 내용에 이어 이 기사에서는 의사 클래스에 대해 더 자세히 살펴보겠습니다. 의사 클래스가 무엇인지, 어떻게 작동하는지, 어떻게 분류하는지, 의사 요소와 어떻게 다른지 살펴보겠습니다. (추천 튜토리얼: css 동영상 튜토리얼)

가상 클래스란 무엇인가요?

의사 클래스는 CSS를 추가하기 위해 특수 상태를 정의하는 키워드를 선택할 수 있는 HTML 요소입니다. 아래와 같이 콜론 구문을 사용하여 CSS 선택기에 의사 클래스를 추가할 수 있습니다: a:hover{ ... }

CSS 클래스는 동일한 스타일 규칙에 적용하려는 HTML에 추가할 수 있는 CSS 클래스입니다. 예를 들어 상단에 있는 요소 메뉴 항목이나 사이드바 위젯의 제목 속성입니다. 즉, CSS 클래스를 사용하여 어떤 면에서 유사한 HTML 요소를 그룹화하거나 분류할 수 있습니다.

의사 클래스는 동일한 특성을 공유하는 요소에 스타일 규칙을 추가하는 데에도 사용된다는 점에서 유사합니다.

그러나 실제 클래스는 사용자 정의되고 소스 코드에서 발견될 수 있지만, 예를 들어 UA(사용자 에이전트)(예: 웹 브라우저)는 현재 상태에 따라

Pseudo 클래스입니다.

의사 클래스 및 의사 요소는 CSS 선택기에서 사용할 수 있지만 HTML 소스 코드에서는 사용할 수 없습니다. 대신 스타일 시트에서 주소 지정을 위해 특정 조건 하에서 UA에 의해 "삽입"됩니다.

의사 클래스의 목적

일반 CSS 클래스의 임무는 요소를 분류하거나 그룹화하는 것입니다. 개발자는 요소가 그룹화되는 방식을 알고 있습니다. "메뉴 항목", "버튼", "썸네일" 등과 같은 클래스를 형성하여 요소를 그룹화하고 나중에 유사한 요소의 스타일을 지정할 수 있습니다. 이러한 분류는 개발자가 직접 제공한 요소의 특성을 기반으로 합니다.

예를 들어 개발자가

를 썸네일 개체로 사용하기로 결정한 경우

"thumbnail" 클래스를 사용하여 분류할 수 있습니다.

<div class="thumbnail">[...]</div>

로그인 후 복사

그러나 HTML 요소는 상태, 위치, 특성, 페이지 및 사용자와의 상호 작용에 따라 공통된 특성을 가지고 있습니다. 이는 일반적으로 HTML 코드에 표시되지 않는 특성이지만 CSS에서 의사 클래스를 사용하여 찾을 수 있습니다. 예:

1. 상위 요소의 마지막 하위 요소

2. 링크

3. 전체 화면 요소입니다.

이것이 의사 클래스가 일반적으로 타겟으로 삼는 특징입니다. 클래스와 의사 클래스의 차이점을 더 잘 이해하기 위해 .last 클래스를 사용하여 다른 상위 컨테이너의 마지막 요소를 식별한다고 가정해 보겠습니다.

<ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li class="last">item 4</li>
</ul>
 
<select>
    <option>option 1</option>
    <option>option 2</option>
    <option>option 3</option>
    <option class="last">option 4</option>
</select>

로그인 후 복사

다음 CSS를 사용하여 이러한 마지막 하위 요소의 스타일을 지정할 수 있습니다.

li.last {
  text-transform: uppercase;
}
 
option.last{
  font-style:italic;
}

로그인 후 복사

하지만 마지막 요소가 변경되면 어떻게 될까요? 음, .last 클래스를 이전 요소에서 현재 요소로 이동해야 합니다.

클래스를 업데이트하는 문제는 적어도 요소 간에 공통적인 특성에 대해서는 사용자 에이전트에 맡겨질 수 있습니다(마지막 요소는 가능한 한 공통적입니다). 미리 정의된 :last-child 의사 클래스를 갖는 것은 정말 유용합니다. 이렇게 하면 HTML 코드의 마지막 요소를 표시할 필요가 없지만 다음 CSS를 사용하여 스타일을 지정할 수 있습니다. , 그들은 모두 접근할 수 없거나 접근하기 어려운 특성을 기반으로 요소를 찾는 방법을 제공합니다. 이것은 MDN의 표준 의사 클래스 목록입니다.

1. 동적 의사 클래스

동적 의사 클래스는 사용자 상호 작용에 대한 응답으로 전환되는 상태에 따라 HTML 요소에 동적으로 추가되거나 제거됩니다. 동적 의사 클래스의 몇 가지 예로는 , , , 및 등이 있으며, 모두 앵커 태그에 추가할 수 있습니다. :hover:focus:link:visited

li:last-child {
  text-transform: uppercase;
}
 
option:last-child {
    font-style:italic;
}

로그인 후 복사

2. 상태 기반 의사 클래스

상태 기반 의사 클래스는 요소가 특정 정적 상태에 있을 때 추가됩니다. 가장 유명한 예는 다음과 같습니다.

:checked는 체크박스에 적용할 수 있습니다(). :fullscreen은 현재 전체 화면 모드에 표시된 모든 요소를 찾습니다.

:disabledHTML 요소, ,