`:last-of-type` が特定のクラスの最後の要素を選択できないのはなぜですか?

クラス属性で :last-of-type が誤って選択される理由

提供された HTML および CSS コードでは、これは次の目的でのみ使用されます。表示される div 内のクラス「visible」を持つ最後の要素。ただし、.class:last-of-type セレクターは無効なままです。

この問題は、:last-of-type の関数の誤解から発生します。特定の型の最後の要素 (この場合は

要素) を正確に選択しますが、特定のクラス属性は考慮されません。

擬似クラス機能:

W3C は、:last-of-type を「その型の最後の兄弟である要素」と定義しています。その動作は次のように要約できます。

1. HTML 内の各包含要素内の要素を識別します。
2. 識別された要素の各セット内の最後の要素を見つけます。
3. 選択された要素が

   であるかどうかを検証します。 element.

4. 「.visible」クラス属性の存在をチェックします。

セレクター分析:

セレクター p. visible:last-of-type は以下をターゲットとします:

• すべての

  を識別します。各 div 内の要素。

• 最後の

  を選択します。

• 最後の

  の両方が必要です。要素と ".visible" クラス属性。

結果:

最初の 2 つのみ

要素には「.visible」クラスがあり、

要素はありません。 :last-of-type を正しく使用しているにもかかわらず、要素が表示されます。

解決策:

「.visible」クラスで最後の要素を選択するには、別の方法があります。必要。 JavaScript またはカスタム CSS 属性ベースのソリューションが適切な回避策を提供する可能性があります。

以上が`:last-of-type` が特定のクラスの最後の要素を選択できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。