記事の内容に適した質問ベースのタイトルをいくつか示します。 核心的な違いに焦点を当てます。 * `.class:last-of-type` が `.class:last-of-class` のように機能しないのはなぜですか? * 本当の行動は何ですか

.class:last-of-type の動作を理解する

直面する問題は、セレクター .class:last-of- type は .class:last-of-class セレクターのようには機能しません。代わりに、コンテナ要素内のその型の最後の兄弟である要素を特にターゲットとします。

.last-of-type について

W3C 仕様によれば、 .last-of-type 擬似クラスは、その型の最後の兄弟である要素を表します。これは、次のことを意味します。

1. HTML 内の各コンテナ要素内の要素のリストをチェックします。
2. 各リストの最後の要素を識別します。
3. 検証します。最後の要素が指定された要素タイプ (p など) と一致すること。

ルールの適用

この例では、セレクター .visible:last -of-type が使用されます。これは、スタイルが以下にのみ適用されることを意味します:

• p タグである要素
• クラス .visible を持つ要素
• 要素コンテナ要素内の .visible クラスを持つ最後の p タグ。

問題の解決

最初の 2 つの p 要素のみが .visible クラスを持つため、 3 番目の p 要素は、.visible:last-of-type セレクターの基準を満たしません。その結果、その表示プロパティはブロックに設定されません。

望ましい結果を達成するには、次のオプションを検討してください。

• 最終的なp タグには .visible クラスもあります。
• JavaScript を使用できない場合は、代替の CSS アプローチを検討して、特定のクラスを持つ最後の p 要素を選択します。

以上が記事の内容に適した質問ベースのタイトルをいくつか示します。 核心的な違いに焦点を当てます。 * `.class:last-of-type` が `.class:last-of-class` のように機能しないのはなぜですか? * 本当の行動は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。