解決された：has（）：長型のテキストの垂直間隔

CSSセレクターを活用した最新のソリューションについて説明します。 :has()firefoxは現在、

フラグ（layout.css.has-selector.enabled）が必要です。 about:config誤字の垂直間隔の複雑さ:has()

は問題を解決しません。 理想的な動作には：<p></p> <h2></h2> <ul></ul>

• セクション（見出しとそれに関連するコンテンツ）の間の一貫した間隔。 これは、見出しの前の重要な間隔を意味します。
はすぐに別の見出しに続きます。
• 伝統的なアプローチとそれらの制限 一般的なソリューションには、DIV（例：）で長型のコンテンツを包み、マージンを管理するためにCSSを適用することが含まれます。ただし、このアプローチには欠点があります

剛性HTML構造：

）。 .rich-text

従来のソリューションはしばしば
• とを混合し、崩壊したマージンとの複雑さにつながります。 これは、直感的ではなく、維持するのが難しい場合があります。 .rich-text > *:first-child
マージンの崩壊：マージンの崩壊：時には有益なこともありますが、複雑さを追加し、特にレイアウトが変更された場合（例えば、FlexBoxに切り替える）、予期しない動作につながる可能性があります。
• ：has（）を備えた最新のソリューション この記事では、改善を目指してmargin-topを使用したソリューションを提案しています。
  • ラッパーは不要です：ラッパークラスの必要性を排除し、HTML構造を簡素化します。
  • 一貫したマージン方向：単一のマージン方向（例：）を使用し、読みやすさと保守性を向上させます。 margin-bottom
  マージンの崩壊を避ける：
  • アプローチは、マージンの崩壊への依存を最小限に抑えます。 Cleaner CSS：
  設定の必要性を減らしてから、スタイルをオーバーライドする。
  • 考慮事項と注意事項

  ブラウザの互換性：

  サポートは普遍的ではありません。実装前にブラウザの互換性を確認してください
  • 限られた要素サポート：提供されている例は、すべてのタイポグラフィ要素をカバーするものではありません（例：:has()）。 これは簡単に拡張できます。
  • 非タイプグラフィー要素：ソリューションは、主にコアテキスト要素に焦点を当てています。他の要素（画像、テーブル）を処理するには、追加のセレクターが必要になる場合があります <blockquote></blockquote>
  見出しレベルの制限：
  • この例は、同じレベルまたはスキップされた見出しレベルの連続した見出しを処理しません。 特異性とITCSS：
  • の使用により、プロジェクト構造に関係なく一貫した特異性が可能になります。 このアプローチは、このCSSをITCSSアーキテクチャの「要素」層に配置することを示唆しています。 結論
  • このアプローチは、長い形式のテキストで垂直間隔を管理するための従来の方法に代わる、よりクリーンで、より柔軟な代替品を提供します。完全に単純ではありませんが、以前のアプローチの多くの制限に対処し、より保守可能で予測可能な結果を​​もたらします。 フィードバックと改善は大歓迎です。

以上が解決された：has（）：長型のテキストの垂直間隔の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。