如何在WordPress的theme.json中仅为下拉子菜单设置顶部边框?
如何在theme.json中仅为下拉子菜单设置顶部边框
完全可以单独设置顶部边框,theme.json支持针对边框的单个边配置样式,不需要给所有边框统一设置。
你可以在theme.json的styles区块中,定位到下拉子菜单对应的元素或区块,然后通过border.top属性单独定义顶部边框的宽度、颜色和样式。
举个具体的配置示例:
{ "styles": { "elements": { "navigation": { "submenu": { "border": { "top": { "width": "1px", "color": "#e0e0e0", "style": "solid" } }, // 可选:如果需要清除其他默认边框,可设置为0 "borderRight": "0", "borderBottom": "0", "borderLeft": "0" } } } } }
如果你的菜单是通过core/navigation区块实现的,也可以直接针对该区块的子菜单配置:
{ "styles": { "blocks": { "core/navigation": { "styles": { "submenu": { "border": { "top": { "width": "1px", "color": "#ccc", "style": "dashed" } } } } } } } }
要点说明:
- 每个边框边(top/right/bottom/left)都能独立设置
width、color、style三个属性 - 如果目标元素有默认的全局边框样式,可以通过单独设置其他边为
0来覆盖 - 若需要更精准的选择范围,可添加
selector属性指定具体的CSS选择器,比如.wp-block-navigation__submenu-container
内容的提问来源于stack exchange,提问作者Rex Reyes
相关产品推荐
相关产品推荐

