コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > CSSチュートリアル > 本文

css: フォーカス疑似クラスの使用

一个新手
リリース： 2017-10-20 09:15:26
オリジナル
2197 人が閲覧しました

CSSの場合: focus疑似クラスの使用、つまりフォーカスを受け取った要素のスタイルの設定

例1


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>:focus</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        input:focus{
            background: #cbcbcb;
        }
    </style></head><body>
    <input type="text"/></body></html>
ログイン後にコピー

上記では、uses:focusを使用して入力入力ボックスのスタイルを設定します。フォーカスを取得します

例 2

: ページのナビゲーション バーでフォーカスが使用されている場合のコード例は次のとおりです: 


<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>:focus</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul li{
            list-style: none;
            float: left;
            margin: 0 20px;
        }
        ul li a{
            text-decoration: none;
        }
        ul li a:focus{
            color: #ff290a;
        }
    </style></head><body>
    <ul>
        <li><a href="javascript:;">博客园</a></li>
        <li><a href="javascript:;">首页</a></li>
        <li><a href="javascript:;">联系</a></li>
        <li><a href="javascript:;">管理</a></li>
    </ul></body></html>
ログイン後にコピー

追加:

When要素要素が有効なリンクの場合は、フォーカスを取得します。次に、「Enter」キーを押してリンクアドレスを入力します

また、ページ上で「Tab」キーを使用して、可能なすべての要素を移動することもできます。集中力を高めて集中させましょう

以上がcss: フォーカス疑似クラスの使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル：
css focus
ソース：php.cn
前の記事：img属性のaltとtitleの違いは何ですか? 次の記事：上達を妨げる10の学習法をベテランがまとめ
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
2
1850
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
10
2017
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1698
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1598
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1615
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート