CSS3のセレクター例を詳しく解説

英語原文: www.456bereastreet.com/archive/200601/css_3_selectors_explained/ 中国語翻訳: www.dudo.org/article.asp?id=197 注: この記事は、IE7、IE8、および Firefox3 がまだリリースされていなかった 2006 年 1 月に書かれました。この記事で言及されているすべてのブラウザのサポートには、これら 3 つのバージョンのブラウザは含まれていませんでした。 IE8 と Fir
:nth-of-type()
:nth-of-type()擬似クラス と nth-child() 擬似クラスは、 rules 指定されたタイプの要素。次のルールは、親要素の 3 番目の子要素に属するすべての p 要素と一致します (1 つの 3 番目の子要素に属する p 要素が多数存在する可能性がありますが、それらは異なる親要素の下に位置します。注意してください):
p:nth-of-type(3) {background:#ff0; }
このメソッドは、3 番目の p 要素がポイントされているかどうかを確認する場合に便利です。最初は、これは nth-child を使用するのと同じ効果があると思うかもしれませんが、nth-child(3) はすべての子要素をカウントするため、p のすべての兄弟要素が p 要素でもある場合を除き、結果は異なる場合があります。
:nth-of-type 疑似クラスは現在ブラウザーでサポートされていません。
:nth-last-of-type 擬似クラス
: nth-last-of-type 擬似クラスが指す要素の後に、同じ型の要素がいくつかあります。 :nth-last-child 擬似クラスと同様に、最後の子要素から逆方向にカウントします。次のルールは、最後から 2 番目の兄弟要素 p と一致します (注意: これは同じレベルの兄弟およびノー​​ドです):
p:nth-last-of-type(2) { background:#ff0 }
:nth; -last-of-type() は現在ブラウザでサポートされていません。
:last-child pseudo-class
:last pseudo-class は、親要素内の最後の子要素を指します。 :nth-last-child(1) と同じ効果があります。次のルールは、親要素の最後の子要素であるすべての p に一致します:
p:last-child {background:#ff0; }
:last-childe 疑似クラスは Mozilla ベースのブラウザで使用できます。 Opera は :last-childe 疑似クラスをサポートしておらず、Safri にはバグがあります (上記のルールはすべての p 要素に一致します)。驚くべきことに、このブラウザは Safari に基づいているにもかかわらず、OmniWeb (ベータ版 5.1.1) で正常に動作します。 OmniWeb では通常、Safari よりもわずかに古いバージョンの WebKit が使用されているため、これは Apple の WebKit の最新バージョンが戻ってきたことによるものと考えられます。
:first-of-type擬似クラス
:first-of-type擬似クラスは、同じ型の要素のうちの最初の要素を指します。 :nth-of-type(1) と同じです。
p:first-of-type {background:#ff0; }
:first-of-type 擬似クラスは現在ブラウザでサポートされていません。
:last-of-type擬似クラス
:last-of-type擬似クラスは、同じ型の要素の最後の要素を指します。 nth-last-of-type(1) と同じです。
p:last-of-type {background:#ff0; }
:last-of-type 疑似クラスは現在ブラウザでサポートされていません。
:only-child pseudo-class
:only-childe pseudo-class は、親要素が他の子要素を持たない要素を指します。これは、:first-child:last-child または :nth-child(1):nth-last-child(1) と同じです (後者は専門的ではなく、十分に簡潔ではありません)。
p:only-child { backgound:#ff0; }
:only-child 疑似クラスは現在、Mozilla ベースのブラウザで使用できます。 Safari では、first-child として解釈されるようです (上記のルールは、ドキュメント内のすべての最初の子要素 ​​p に一致します)。
:only-of-type pseudo-class
:only-of-type pseudo-class は、同じ型の子要素を持たなくなった親要素を指します。これは、:first-of-type:last-of-type または :nth-of-type(1):nth-last-of-type(1) と同じです (後者は十分に専門的ではありません)。
p:only-of-type {background:#ff0; }
:only-of-type 擬似クラスは現在ブラウザでサポートされていません。

【関連する推奨事項】

1. CSS3 の無料ビデオチュートリアル

2. 20 の一般的な CSS/CSS3 プロパティを統合

3. プロンプト テキストを含む入力ボックスを作成する

4

一般的に使用されるいくつかの最新の CSS3 属性を共有します

5. CSS を使用してチャット ボックスの小さなコーナーとバブル効果を作成します

以上がCSS3のセレクター例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。