ホームページ  >  記事  >  ウェブフロントエンド  >  HTML5_html5 チュートリアルのスキルにおける新しい CSS セレクターと疑似クラスの紹介

HTML5_html5 チュートリアルのスキルにおける新しい CSS セレクターと疑似クラスの紹介

WBOY
WBOYオリジナル
2016-05-16 15:49:081939ブラウズ

セレクター
p[name^="my"]{font-size:14px}
セレクター ^= は、name 属性が "my" p[ で始まるすべての

要素タグ
に適用されます。 name$="my"]{font-size:14px}
Selector$= は、name 属性が "my" で終わるすべての

要素タグにルールを適用します。
p[name*= "my" ]{font-size:14px}
Selector$= は、name 属性の末尾に「my」が含まれるすべての

要素に適用します。
Selector> , ,~
Selector >影響を受ける要素は最初の要素の子です。
セレクター このセレクターは、要素の直後の要素を参照します。2 つの要素は同じ親を持つ必要があります。
Selector~ は に似ていますが、影響を受ける要素は必ずしも最初の要素に続くわけではありません。

疑似クラスの名前と参照される要素の間に「:」を追加します
例: myclass:nth-child(2)
myclass 要素の 2 番目の要素
Keyword " odd " , "even"
myclass:nth-child(odd): 親要素のインデックス位置が奇数である
に影響します
myclass:nth-child(even): 親要素のインデックス位置が奇数である
に影響します要素のインデックス位置は偶数です

コードをコピー
コードは次のとおりです:


.test:nth-child(odd)
{
color:Blue;
}
.test:nth-child(even)
{
color: Red ;
}
.test:nth-child(2)
{
}
">
1



2




1


2

🎜>


1


2

🎜>

効果は次のとおりです:
1
2
1
2
1
2
否定疑似クラス
:not(p ){color:red}
excel< ;p> 要素以外のすべての要素は赤色です
声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事:HTML5 の新しいグローバル属性 (整理)_html5 チュートリアル スキル次の記事:HTML5 の新しいグローバル属性 (整理)_html5 チュートリアル スキル

関連記事

続きを見る