Squarespace单页面代码应用求助：添加文本块分隔竖线失败

• 确认区块ID准确性：通过浏览器开发者工具（F12）右键检查目标文本块元素，找到真实的区块ID（格式为#block-xxxxxx），确保代码中使用的ID与实际元素ID完全匹配，不要用示例中的#block-2这类占位符。

• 检查CSS优先级：Squarespace默认样式可能覆盖自定义规则，可尝试为border属性添加!important提升优先级，测试样式是否生效：

@media only screen and (min-width:640px){
  #block-xxxxxx, #block-xxxxxx {border-left: 1px solid #fff !important;}
  #block-xxxxxx, #block-xxxxxx {border-right: 1px solid #fff !important;}
}

• 确认代码注入位置：不要将CSS放在内容区块的代码块中，正确位置是页面设置 > 高级 > 页面头部代码注入，这里注入的样式优先级更高且不会被过滤。注意：头部注入时可直接写CSS代码，无需包裹<style>标签（包裹也能生效，但简化写法更稳妥）。

• 排查元素盒模型与可见性：

  • 检查目标区块是否为display: inline元素，这类元素的左右边框可能无法正常显示，可添加display: block;或display: inline-block;规则。
  • 若页面背景为白色，#fff颜色的竖线会完全隐形，换成#ccc或其他深色测试。

• 验证媒体查询生效范围：当前代码仅在屏幕宽度≥640px时生效，测试时需将浏览器窗口拉宽至640px以上，或暂时移除@media规则，先测试基础border样式是否能正常显示。

内容的提问来源于stack exchange，提问作者ccalavitta