「h3:nth-child(1):contains(\'a\')」 が期待どおりに動作しないのはなぜですか?

セレクター h3:nth-child(1):contains('a') 無効

見かけの構文にもかかわらず、セレクター h3 は次のようになります。 nth-child(1):contains('a') は意図した動作に失敗しますfunction.

Under the Hood

さらに調査すると、h3:nth-child(1) は親コンテナ内の最初の h3 要素を正しくターゲットにしていることがわかります。ただし、h3:nth-child(1):contains('a') は結果を生成しません。これは、もともと CSS3 機能として意図されていた :contains() セレクターが CSS 仕様から省略されているためです。

: contains() は、特定のテキスト パターンを含む要素と一致するように設計されています。残念ながら、その機能によりブラウザのパフォーマンスに課題が生じ、過剰選択の問題が発生しました。たとえば、:contains() を使用して要素を照合すると、その要素のすべての祖先も照合されるため、ユニバーサル セレクターまたは特定のスタイル プロパティと組み合わせると、予期しない動作が発生する可能性があります。

代替アプローチ

適切な CSS セレクターの代替手段がないため、目的の結果を得るには代替方法が必要です。 HTML 構造を変更するか、jQuery の :contains() 実装を利用することができます。

• 親内の最初の子として、「a」を含むテキストを持つ h3 要素を選択します。

jQuery または Selenium RC考慮事項

jQuery および Selenium RC ユーザーの場合、:contains() は Sizzle セレクター エンジンに実装されており、CSS3 仕様と同様の機能を提供します。ただし、予期しない選択を避けるために、このセレクターを慎重に使用することをお勧めします。

改良

最後に、h3:nth-child(1) は h3 に置き換えることができます。 :first-child CSS2 セレクターとしてブラウザーの互換性を強化します。

以上が「h3:nth-child(1):contains(\'a\')」 が期待どおりに動作しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。