CSS3 ターゲット擬似クラスについて言わなければならないこと (純粋な CSS はタブ切り替えを実装します)
このターゲットは少し見覚えがあると思いますか?!
今日私が話そうとしていることはそうではありませんHTMLのタグ。
対象の擬似クラスはCSS3の新しい属性です。CSS 属性に詳しい人なら、疑似クラスと言えば、hover、:link、:visited、:focus などを知っているはずです。target の使用法はそれらと同じです。
正式な定義は次のとおりです:
URL の後にアンカー名が続き、 # ドキュメント内の特定の要素を指します。リンクされた要素がターゲット要素です。
:target selector は、現在アクティブなターゲット要素を選択するために使用できます。
この定義を初めて見た場合は、少し混乱していますか? ！関係ありません~ プログラマはコードを使って通信します。栗をください。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
< ;style>
:target
{
ボーダー: 2px 青 }
; <本文>
< ;p>コンテンツ 1 にジャンプ
コンテンツ 1...
;コンテンツ 2...
これを読んだ後はそうではありませんコードは良い感じですか?~それでは、レンダリングを見てみましょう。 初期化は次のようになります:
[Jump to content 1] をクリックすると、次のようになります:
他の擬似タイプとはターゲットが違うと思いますか?!
はは〜、早速本題に入りましょう！ ！ ！ target の特性を利用して、純粋な CSS タブ効果の切り替えを実現できます。 target の特性を利用して、純粋な CSS タブ効果の切り替えを実現できます。 target の特性を利用して、純粋な CSS タブ効果の切り替えを実現できます。
(大事なことは3回言いましょう!)
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
