의사 클래스 :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 의사 클래스
답변
네 가지 경우가 있습니다.
- 기본적으로 활성 및 초점은 모두 꺼져 있습니다.
- 포커스 가능한 요소 를 순환하기 위해 탭 하면 요소 가
:focus
활성화되지 않고 입력됩니다 . - 이 때 클릭 A의 포커스 불가능한 요소 , 그것은 입력
:active
(초점없이). - 언제 클릭 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)에 초대합니다.