2011-02-18 19 views
8

私は、CSS:activeセレクタでhereを探していました。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> 

フォームフィールドは、以下の目的で使用できます。しかし、ボタンまたはリンクはアクティブでは機能しません。

なぜですか? 「アクティブなページ」について何かありますかw3schoolsが話していることを理解していません。

グーグルでこれを見ると、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ダイヤルアップの日に、ユーザーがクリックしたリンクが読み込まれていることを視覚的に示す必要があったのは素晴らしいことでした。

関連する問題