8

私はここで CSS :active Selector を見ていました。

:active セレクタ スタイルは、アクティブなページにリンクします

HTML/CSS 用語で「アクティブなページ」とは一体何なのかと考えさせられました...

この時点で、w3docsセクションに移動しました: 5.11.3 動的疑似クラス: :hover、:active、および :focus。

:active 疑似クラスは、要素がユーザーによってアクティブ化されている間に適用されます。たとえば、ユーザーがマウス ボタンを押して離すまでの時間です。

そこで、w3shools の try it ページの 1 つを使用して例をハックし、次のコードを置き換えました。このコードをカット アンド ペーストして試すことができます。

<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 で機能します。ただし、ボタンまたはリンクは :active では機能しません。

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

グーグルでこの素晴らしいヒントを見ましたが、関連しているとは思いません。

4

3 に答える 3

26

CSS には「アクティブなページ」という概念はありません。実際、SitePoint Referenceは次のように述べてこれを暴きます。

疑似クラスは、アクティブなページまたは現在のページへのリンクを意味しません。これは、CSS の初心者の間でよくある誤解です。

仕様が言っていることは正しいです:アクティブ化された要素、たとえばクリックされた (例のように) か、ブラウザがリンクのターゲットへの移動を開始するようにトリガーされたその他の方法で:active要素をスタイルするだけです。

<a>要素だけに適用されるわけではないことに注意してください。クリックされた非フォーム入力要素に適用される場合があります。たとえば、これを行うことができます：

p:active {
    color: red;
}

クリックした段落は、テキストが赤く点滅します。

ただし、正確な定義と実装はブラウザに任されていることに注意してください。ただし、一般的<a>には、アクティブ化された状態の要素に依存できます。

于 2011-02-18T18:56:38.603 に答える
1

:activea要素 (またはボタンなど) の上にマウスを置いたときにその要素に与えられるスタイルです。スタイル付きボタンをクリックすると、一部のサイトで表示されるのを見たことがあるかもしれません。実際にボタンをクリックすると、変更される場合があります。これが:active疑似クラスです。

于 2011-02-18T18:58:18.633 に答える
0

私はいつも:activeリンクに使用しています。ブラウザがクリックしたばかりのページに移動する直前に、テキストが呼び出した色に変わりますa:active{ ... }

例：

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

ほとんどのブラウザーはこれをサポートしていますが、スタイルを整えるのに時間をかける価値はありません。56k ダイヤルアップの時代には、ユーザーがクリックしたリンクが読み込まれていることを視覚的に示す必要があるのは便利なことでした。

于 2011-02-18T19:00:16.483 に答える