クラス名セレクターは CSS3 の新しい機能ですか?

クラス名セレクターは css3 に新しいものではありません。クラス名セレクターは、指定されたクラスを持つ要素を選択するために使用されます。構文は「.class{css code;}」です。クラス名セレクターは css3 にあります。これは以前から使用されており、CSS3 にとって新しいものではありません。CSS3 の新しいセレクターには、属性セレクター、構造擬似クラス セレクターなどが含まれます。

このチュートリアルの動作環境: Windows 10 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

クラス名セレクター

クラス セレクター

クラス属性を使用してクラス class を呼び出す

例:

 <p class="one">类选择器</p>

 .one {
       color: yellow;
        }

ここでの p タグのクラス名は one と呼ばれ、CSS がそれにスタイルを追加するときに使用されます。one (クラス名) がそれを選択します。これがクラス セレクターです。

拡張知識: css3 新しいセレクター

属性セレクター

• input[value] { }(input および With value 属性)

• input[type=text] {} {入力属性の値はテキストなので変更する必要があります}

• ##div[ class ^=icon] { } (最初は div で、次に class 属性を持つ要素を選択し、属性値は icon で始まる必要があります)

• section[class$=data] {} (クラス名がデータで終わるを選択)

構造擬似クラスセレクター

• ul li:first-child { } (最初のクラスを選択) child in ul A child li)

• ul li:last-child { } (ul の最後の子 li を選択します)

• #ul li: nth-child(2) { } (ul の 2 番目の子 li を選択します)

• ul li:nth-child(6) { } (ul の 2 番目の子を選択します 6 番目の子)は小さい li)

• ul li:nth-child(even/2n) { } (偶数の子をすべて選択)

• ul li:nth-child(odd/2n 1) { } (奇数の子をすべて選択)

• ol li:nth-child(n ) { } (0 から開始して加算)毎回 1。逆算は n でなければなりません。他の文字はできません。子をすべて選択

• ul li:nth-child(n 5) { } (5 番目の子から選択します) )

##ul li:nth-child(-n 5) { } (5 番目の子から数えて順に選択します)
ul li :first-of-type { } (最初の子)
ul li:last-of-type { } (最後の子)
ul li:nth-of-type(even) { } (子の数は偶数)
section div:nth-child( 1) { } (nth-child はすべてを配置します)実行時は、まず nth-child(1) を確認し、次に戻って前の div を確認します)
section div:nth -of-type (1) { } (nth-of-type は、指定された要素のボックスをシリアル番号順に配置します。実行時は、まず div で指定された要素を確認してから、戻って確認します: nth-of-type(1) which子)
疑似要素セレクター (ページ上には見つかりません。フォント ラベルによく使用されます) [ラベル セレクターと同じ、重みは 1]

::before 要素の前 (親ボックスの内側の前) にコンテンツを挿入します。
::after 要素の後ろ (親ボックスの内側の前) にコンテンツを挿入します。親ボックス)
content 属性が必要です
div::after { content: 'I';}
.tudou:hover::before { } (マウスがポテトボックスの上を通過すると、内部のビフォアマスクレイヤーが表示されます)
疑似要素がフローティングをクリアします
(学習ビデオ共有:

css ビデオ チュートリアル

、html ビデオ チュートリアル)

以上がクラス名セレクターは CSS3 の新しい機能ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。