解决：has（）：长形文本中的垂直间距

>在长篇文本中管理垂直间距，尤其是在CMS驱动的网站中，对开发人员提出了持续的挑战。 这通常是通过自定义CSS来解决的，但是实现一致且可预测的结果可能非常困难。 本文探讨了一个现代解决方案，利用:has()> css选择器。

>

firefox当前需要layout.css.has-selector.enabled> flag（inabout:config）才能:has()支持。

印刷垂直间距的复杂性

>只需将顶部和底部边缘应用于 <cod> </cod>，<p></p>和之类的元素。 理想行为需要：<h2></h2> <ul></ul> 在第一个元素上方或下一个元素以下的

>

• 内部的最后一个元素上方的
。这样可以确保可预测的周围元素的位置。
• >在各部分之间（标题及其相关内容）之间的一致间距。 这意味着在标题之前进行明显的间距，除非 它立即遵循另一个标题。
。

传统方法及其局限性

常见的解决方案涉及将长格式内容包裹在DIV（例如.rich-text）中，并应用CSS来管理边缘。但是，这种方法有缺点：

• 刚性的HTML结构：要求包装类别需要特定的HTML结构，并可能与现有代码或CMS生成的内容发生冲突。 对第一个/最后一个元素边缘的精确控制进一步限制了结构（例如，.rich-text > *:first-child）。
>
• >混合边缘属性：传统解决方案通常混合和margin-top，导致边缘折叠的复杂性。 这可能不太直观，更难维护。margin-bottom>
>
• >崩溃的边缘：折叠边缘，有时有益，增加复杂性并可能导致意外行为，尤其是当布局变化时（例如，切换到flexbox）。

一个现代解决方案：has（）

本文提出了一种使用

的解决方案，旨在改进：>

• >无需包装器：消除了对包装类别的需求，简化了HTML结构。
• 一致的边缘方向：>使用一个边缘方向（例如，margin-bottom），增强可读性和可维护性。>
>
• 避免折叠率：该方法最小化对折叠边缘的依赖。
• 清洁器CSS：减少了设置的需求，然后覆盖样式。
注意事项和警告

浏览器兼容性：
• 不是通用；在实现之前检查浏览器兼容性。 :has()>
有限的元素支持：
• 所提供的示例并不涵盖所有印刷元素（例如，）。 这很容易扩展。 <blockquote></blockquote>
>解决方案主要集中在核心文本元素上；处理其他元素（图像，表格）可能需要其他选择器。
• > 标题级别的限制：
该示例无法处理相同级别或跳过标题级别的连续标题。
• > 特异性和ITCSS：使用
>无论项目结构如何，都可以保持一致的特异性。 该方法表明将此CSS放置在ITCSS架构的“元素”层中。
• 结论:where()
>此方法提供了一种更清洁，更灵活的替代方案，用于传统方法，用于在长篇文本中管理垂直间距。尽管并不完全简单，但它解决了以前方法的许多局限性，从而产生了更可维护和可预测的结果。 欢迎反馈和改进。

以上是解决：has（）：长形文本中的垂直间距的详细内容。更多信息请关注PHP中文网其他相关文章！