2011-02-18 3 views
8

나는 here에서 CSS : active Selector을 (를) 발견했습니다.CSS 의사 클래스에 의해 혼동 : 활성화

: 활성 선택 스타일이에서 도대체 HTML/CSS 용어에서 '활성 페이지'뭔지 생각있어 활성 페이지

, ...

에 대한 링크 포인트 w3docs 섹션으로 이동 : 5.11.3 동적 가상 클래스 : : hover, : active 및 : focus.

: 요소가 사용자에 의해 활성화되는 동안 활성 가상 클래스 적용한다. 예를 들어, 시간이 사이 일 때 사용자가 마우스 버튼을 누르고 이 그것을 놓습니다.

그래서 난 그냥 & 붙여 넣기를 잘라 시도 할 수 있습니다 다음과 같은 코드를 대체하여 w3shools try it pages 중 하나를 사용하는 예를 함께 해킹.

<html> 
<head> 
<style type="text/css"> 
:focus,:active 
{ 
outline-offset: 10px; 
outline: solid; 
} 
</style> 
</head> 

<body> 
<p>Click the links to see the background color become yellow:</p> 
<a href="http://www.w3schools.com">w3schools.com</a> 
<a href="http://www.wikipedia.org">wikipedia.org</a> 
<button type="button">Click Me!</button> 
<form> 
<input type="text"/> 
</form> 
</body> 
</html> 

양식 필드는 : focus에 사용할 수 있습니다. 그러나 단추 또는 링크가 작동하지 않습니다.

왜 그럴까요? '활성 페이지'에 대한 무언가가 있습니까? w3schools가 말한 것을 이해하지 못합니다.

Google 검색에서이 nice tip을 보았지만 관련이 있다고 생각하지 않습니다.

답변

25

CSS에는 "활성 페이지"라는 개념이 없습니다. 사실, SitePoint Reference 말하여이 정체를 폭로 :

는 의사 - 클래스는 하지가 활성 또는 전류에 대한 링크를 의미 않는 페이지 즉 CSS 초보자들 사이 일반적인 오해입니다. , 을 활성화 :active 단순히 스타일 요소, ​​예를 들어 :

은 무엇 사양 말하는 것은 맞다 (주어진 예에서와 같이) 클릭되거나 브라우저가 링크 대상으로 이동하기 시작하는 다른 방법으로 클릭하면됩니다.

요소는 <a> 요소에만 적용되는 것이 아닙니다. 그것은 클릭 된 모든 비 형식 입력 요소에 적용될 수 있습니다. 예를 들어 다음과 같이 할 수 있습니다.

p:active { 
    color: red; 
} 

클릭하면 모든 문단이 빨간색으로 깜박입니다.

그러나 정확한 정의와 구현은 브라우저에 맡겨져 있지만 은 일반적으로이며 활성화 된 상태의 요소는 <a> 개입니다.

1

:active은 마우스를 내릴 때 요소 (예 : a 또는 단추)에 지정된 스타일입니다.스타일이 지정된 버튼을 클릭하면 일부 사이트에서이 광고가 표시 될 수 있습니다. 실제로 버튼을 클릭하면 변경 될 수 있습니다. 이것은 :active 가상 클래스입니다.

+0

나는 이미 그것을 이해했다. 그것은 w3schools가 내게 던져 준 오도 된 활성 페이지 것입니다. @zzzBov & @ BoltClock에서 이미 다뤘습니다. – JGFMK

0

나는 항상 :active 링크를 사용했습니다. 브라우저가 그냥 클릭 페이지로 이동하기 전에 분할 초 텍스트는에서 호출 된 색상으로 변경됩니다 a:active{ ... }

예 :

a:active { color:pink; font-weight:bold; } 

대부분의 브라우저를 지원하지만, 정말 가치가 없어 그것을 스타일링하는 당신의 시간. 56k 다이얼의 날에 사용자가 클릭 한 링크가로드되고 있음을 시각적으로 보여줘야한다는 것이 좋은 일이었습니다.