ホームページ > 記事 > ウェブフロントエンド > css: フォーカス疑似クラスの使用
css: フォーカス疑似クラスの使用
- 一个新手オリジナル
- 2017-10-20 09:15:262151ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。