8 篇博文 含有标签「CSS」

在为客户开发 WordPress FSE Block Theme 并集成 WooCommerce 时，遇到 4 个 WooCommerce 静默篡改主题样式的陷阱。每个都很隐蔽，排查耗时。记录根因与解法，帮助同样开发 FSE + WooCommerce 主题的开发者避坑。

TL;DR​

1. 字号预设覆盖：WooCommerce 注册 small/medium/large/x-large 四个预设覆盖 theme.json，用 h-1~h-6 自定义 slug 规避
2. font-size class 连字符：has-h-1-font-size(48px) vs has-h1-font-size(20px)，手写 HTML 必须带连字符
3. contrast 颜色反转：--wp--preset--color--contrast 被 WooCommerce 改为浅色（#f8fafc），白色文字完全不可见
4. ul.products 伪元素：WooCommerce 注入 ::before/::after 破坏 CSS Grid 布局，需 display:none 清除

在为客户开发 WordPress FSE Block Theme 时发现：博客列表页的卡片悬浮时文字区域发生偏移，但卡片外框不动，视觉上非常违和。记录根因与解法。

TL;DR​

通用卡片 hover 选择器 .wp-block-columns .wp-block-column > .wp-block-group:hover 会匹配到卡片内部嵌套的文字 group，导致悬浮时内层文字偏移而外层卡片不动。修复方式：用 .wp-block-post-template 前缀重置内层 group 的 hover 效果。

TL;DR​

用 ::before 伪元素实现容器背景装饰纹理（圆点/网格）时，必须同时设置 opacity、pointer-events: none 和 z-index: -1。缺少 opacity 导致纹理 100% 不透明，缺少 z-index 导致纹理覆盖按钮等子元素。

TL;DR​

WordPress FSE Group 块的 layout 属性会自动生成 is-layout-* CSS 类，这些类的样式优先级高于普通自定义 CSS，导致尺寸设置失效。解决方案：1) 块注释中使用 "layout":{"type":"default"} 避免生成额外布局类；2) CSS 中使用 !important 强制覆盖；3) 关键：添加 padding: 0 !important 清除 Group 块默认内边距。

TL;DR​

Docusaurus 文档页标题中的 SVG 图标与文字对齐，推荐使用 display: flex + align-items: center + gap，配合 .theme-doc-markdown 选择器精准隔离 docs 页面，不影响 blog。

TL;DR​

Docusaurus 引入 Tailwind 后，Preflight 的 CSS Reset 会重置 <ul> 元素的 list-style、margin、padding，导致面包屑导航样式丢失。解决方法是在 custom.css 中添加显式覆盖样式。

TL;DR​

Docusaurus 项目引入 Tailwind CSS 后，markdown 文档中的标题（h1-h6）会失去默认样式。原因是 Tailwind Preflight 重置了所有标题的 font-size 和 font-weight。在 custom.css 中使用 .markdown 选择器手动恢复即可。

TL;DR​

Docusaurus 切换 Rspack 构建后，Navbar Logo 可能显示原始图片尺寸覆盖页面。在 custom.css 中显式覆盖 .navbar__logo 样式即可解决。