CSS :active selectorのサンプルコードの詳細説明
Active
activeの一節は、英語では「active」、つまりマウスをクリックすることを意味すると解釈されます。アクティブ セレクターの最も一般的な例はおそらくリンクに適用されますが、リンクを開くのは瞬間的なアクションであり、アクティブ セレクターの特性を十分に反映していません。
アクティブの特徴
実際、アクティブでリンクを開くと、モジュールを解放するまでモジュールをクリックするという、アクティブをアクティブにするプロセスがあります。この処理にかかる時間を指定しない場合、デフォルトでは 10 分の数秒かかると思います。
<!DOCTYPE html><html>
<head>
<title>a</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
a{
display:block;
width:30px;
margin:20px;
border-radius:8px;
padding:20px 50px;
text-align:center;
background:green;
}
a:active{
background:indigo;
}
</style>
</head>
<body>
<a href="paris.jpg">link</a>
</body></html>
この時間は、transition 属性を通じて調整できます。
a:active{
background:indigo;
transition:3s;
}
読者は実験を行い、transition の値を変更してから、avtive セレクターによって費やされた時間をテストできます。
アクティブな例
<!DOCTYPE html><html>
<head>
<title>a</title>
<meta name="content-type" content="text/html; charset=UTF-8">
<style>
p {
width:100px;
height:100px;
background:red;
transition: 5s;
}
p:active {
width:300px;
height:300px;
transition:3s;
}
</style>
</head>
<body>
<p></p>
</body></html>遷移が 2 つあるということは、遷移が 2 つあることを意味します。
最初のトランジションは、アクティブセレクターをアクティブにすることです。この時点で、p:avtive のトランジションが機能します。
2 番目のトランジションでは、マウスを放すと、画像のサイズが通常に戻ります。この時点で、p のトランジションが有効になります。
リーダーが p の遷移のみを設定する場合、セレクターの遷移時間はデフォルトで p の遷移になります。
以上がCSS :active selectorのサンプルコードの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7318
9
1625
14
1349
46
1261
25
1209
29
CSSのIDセレクターの識別子は何ですか
Sep 22, 2022 pm 03:57 PM
CSS では、ID セレクターの識別子は「#」です。特定の ID 属性値でマークされた HTML 要素に特定のスタイルを指定できます。構文構造は「#ID 値 {属性: 属性値;}」です。 ID 属性は一意であり、ページ全体で反復できません。ID 属性値は数字で始まってはなりません。数字で始まる ID は Mozilla/Firefox ブラウザでは機能しません。
css擬似セレクター学習擬似クラスセレクター解析
Aug 03, 2022 am 11:26 AM
前回の記事「Css擬似セレクターの学習 - 擬似要素セレクターの解析」では擬似要素セレクターについて学習しましたが、今回は擬似クラスセレクターについて詳しく見ていきます。
:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。
Nov 20, 2023 am 11:20 AM
:nth-child(n+3) 擬似クラス セレクターを使用して、位置が 3 以上の子要素のスタイルを選択します。具体的なコード例は次のとおりです。 HTML コード: <divid="container" ><divclass="item"> ;最初の子要素</div><divclass="item"&
JavaScript セレクターが失敗した場合の対処方法
Feb 10, 2023 am 10:15 AM
コードが標準化されていないため、JavaScript セレクターが失敗します。解決策は、 1. インポートされた JS コードを削除すると、ID セレクター方式が有効になります。 2. 「jquery.js」を導入する前に、指定された JS コードを導入するだけです。
初心者から熟練者まで: is セレクターと where セレクターの使用スキルをマスターする
Sep 08, 2023 am 09:15 AM
初心者から上級者まで: is および where セレクターの使用スキルをマスターする はじめに: データの処理と分析のプロセスにおいて、セレクターは非常に重要なツールです。セレクターを使用すると、特定の条件に従ってデータセットから必要なデータを抽出できます。この記事では、読者がこれら 2 つのセレクターの強力な機能をすぐに習得できるように、is および where セレクターの使用スキルを紹介します。 1. is セレクターの使用 is セレクターは、与えられた条件に基づいてデータセットを選択できるようにする基本的なセレクターです。
CSS のセレクターにはハイパーテキスト タグ セレクターが含まれますか?
Sep 01, 2022 pm 05:25 PM
含まれていない。 CSS セレクターには次のものがあります: 1. HTML ページの要素名を通じて特定の HTML 要素を見つけるタグ セレクター; 2. HTML 要素の class 属性の値を通じて特定の HTML 要素を見つけるクラス セレクター; 3. ID セレクターHTML 要素の id 属性の値を通じて特定の HTML 要素を検索します。 4. ワイルドカード セレクター「*」は、カスタム要素を含むすべてのタイプのタグ要素を参照できます。 5. 属性セレクターは、HTML 要素の既存の属性名を使用します。特定の HTML 要素を見つけるための HTML 要素または属性値。
is および where セレクターの詳細な分析: CSS プログラミング レベルの向上
Sep 08, 2023 pm 08:22 PM
is および where セレクターの詳細な分析: CSS プログラミングのレベルの向上 はじめに: CSS プログラミングのプロセスにおいて、セレクターは不可欠な要素です。これにより、特定の基準に基づいて HTML ドキュメント内の要素を選択し、スタイルを設定することができます。この記事では、一般的に使用される 2 つのセレクター、つまり is セレクターと where セレクターについて詳しく説明します。その動作原理と使用シナリオを理解することで、CSS プログラミングのレベルを大幅に向上させることができます。 1. is selector is selector は非常に強力な選択肢です
