:focus 및 :active 의사 클래스는 언제 사용합니까?

:focus와 :active 의사 클래스 구별

:focus와 :active 스타일 상태는 모두 사용자 상호 작용을 통해 활성화될 수 있지만, 기능이 다릅니다

:focus

• 입력 포커스를 받고 사용자 입력을 받을 준비가 된 요소를 나타냅니다.
• 활성화되는 경우 탭과 같은 키보드 탐색을 사용하여 요소를 선택합니다. key.

:active

• 사용자가 적극적으로 클릭하거나 탭하는 요소를 나타냅니다.
• 종종 다음과 함께 표시됩니다. 요소가 포커스를 받을 때의 포커스 상태 click.

주요 차이점

• :focus는 입력을 위해 요소가 선택되었음을 나타내고, :active는 클릭 또는 탭 동작을 의미합니다. 진행 중입니다.
• :focus는 키보드 기반 상호 작용에 의해 트리거되는 반면, :active는 마우스 또는 터치 기반 상호 작용에 의해 트리거됩니다. 이벤트.
• 요소를 클릭하면 일반적으로 :focus 및 :active 상태를 통해 전환됩니다.

예

다음을 고려하세요. 다음 HTML 및 CSS 코드:

<button>
  Click to Change Color
</button>

<style>
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>

버튼이 처음 렌더링되면 활성 상태가 없습니다. 또는 초점 상태. 사용자가 Tab을 사용하여 포커스를 지정하면 :focus 상태가 되고 텍스트가 빨간색으로 변합니다. 그런 다음 사용자가 버튼을 클릭하면 :active 상태가 되어 텍스트가 빨간색으로 굵게 변합니다.

위 내용은 :focus 및 :active 의사 클래스는 언제 사용합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!