文書全体の特定の型の最初の要素との一致
問題:
ドキュメント内の特定の型の最初の要素に :first-of-type スタイルを適用するにはどうすればよいですか。親要素に関係なく?
CSS の制限:
CSS の :first-of-type 擬似クラスは、親要素内の特定の型の最初の兄弟のみを選択しますドキュメント全体ではありません。
JavaScript解決策:
:first-of-type クラスの追加:
例:
document.querySelector('p').className += ' first-of-type';p {
background: red;
}
p.first-of-type {
background: pink;
}<body>
<section>
<p>111</p>
<p>222</p>
<p>333</p>
</section>
<p>444</p>
<p>555</p>
</body>このソリューションでは、場所に関係なく、ドキュメント全体の最初の段落が確実に配置されます。 、「最初のタイプ」スタイルを受け取ります。
以上がドキュメント全体内の特定の要素タイプの最初のインスタンスをスタイルするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
