: focus와 : active의 차이점은 무엇입니까?

의사 클래스 :focus와 :active의사 클래스 의 차이점은 무엇입니까 ?

:focus그리고 :active두 개의 서로 다른 상태입니다.

• :focus 요소가 현재 입력을 받도록 선택된 상태를 나타냅니다.
• :active 요소가 현재 사용자에 의해 활성화되고있는 상태를 나타냅니다.

예를 들어 우리가 있다고 가정 해 봅시다 <button>. 는 <button>시작 어떤 상태가되지 않습니다. 그냥 존재합니다. 에 Tab"초점"을 부여 하는 데 사용 <button>하면 이제 :focus상태 로 들어갑니다 . 그런 다음을 클릭 (또는 누름 space)하면 버튼이 ( :active) 상태가됩니다.

당신이 요소를 클릭 그 메모에, 당신은 또한 환상을 양성하는 포커스를 :focus와 :active동일합니다. 그들은 동일하지 않습니다. 클릭하면 버튼이 :focus:active상태입니다.

예를 들면 :

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

편집 : jsfiddle

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

출처 : CSS 의사 클래스

네 가지 경우가 있습니다.

1. 기본적으로 활성 및 초점은 모두 꺼져 있습니다.
2. 포커스 가능한 요소 를 순환하기 위해 탭 하면 요소 가 :focus활성화되지 않고 입력됩니다 .
3. 이 때 클릭 A의 포커스 불가능한 요소 , 그것은 입력 :active(초점없이).
4. 언제 클릭 A의 포커스 요소 가 들어갑니다 :active:focus(활성을 동시에 초점).

예:

<div>
  I cannot be focused.
</div>

<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}

div:active {
  color: orange;
}

div:focus:active {
  font-weight: bold;
}

페이지가 둘 다인 경우 1입니다. 탭을 누르면 두 번째 div에 초점을 맞추고 사례 2를 표시합니다. 첫 번째 div를 클릭하면 사례 3이 표시됩니다. 두 번째 div를 클릭하면 사례 4가 표시됩니다. .

요소가 초점을 맞출 수 있는지 여부는 또 다른 질문 입니다. 대부분은 기본적으로 아닙니다. 그러나, 그것은 가정 안전 <a>, <input>, <textarea>기본적으로 포커스입니다.

: focus는 요소가 입력을 받아 들일 수있는 경우-입력 상자의 커서 또는 탭된 링크입니다.

: active는 사용자가 요소를 활성화 할 때입니다. 사용자가 마우스 버튼을 눌렀다 놓을 때까지의 시간입니다.

활성은 사용자가 해당 지점을 활성화 할 때입니다 (마우스 클릭과 같이 필드 간 탭을 사용하는 경우 활성 스타일의 부호가 없습니다. 더 많은 시간이 필요하면 해당 지점을 클릭하십시오). 포인트가 활성화됩니다. 이 시도 :

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>

<input type="text"/>
<input type="text"/>

포커스는 키보드 입력으로 만 제공 할 수 있지만 마우스 나 키보드로 요소를 활성화 할 수 있습니다.

링크에 : focus를 사용하면 키보드에서 버튼을 누르면 스타일 규칙이 적용됩니다.

"포커스"를 사용하면 키보드 사용자가 마우스로 마우스를 가져갈 때와 동일한 효과를 얻을 수 있습니다. Internet Explorer에서 동일한 효과를 얻으려면 "활성"이 필요합니다.

실제로 이러한 상태는 모든 사용자에게 필요한대로 작동하지 않습니다. 세 가지 선택기를 모두 사용하지 않으면 실제로 마우스를 사용할 수없는 많은 키보드 전용 사용자에게 접근성 문제가 발생합니다. #nomouse 챌린지 (nomouse dot org)에 초대합니다.