Shopify产品页标题去加粗：h1内strong标签样式覆盖问题

当然可以通过CSS规则直接覆盖h1内部<strong>标签的样式，具体方案如下：

1. 仅针对产品页的精准规则 #

Shopify产品页的<body>标签通常会带有专属类（比如默认主题的template-product），用这个规则只会影响产品页的h1：

.template-product h1 strong {
  font-weight: 300;
}

2. 全局生效的规则（若所有页面h1内的strong都需要修改） #

h1 strong {
  font-weight: 300;
}

为什么之前的设置无效？ #

<strong>标签默认自带font-weight: bold（权重值700）的样式，子元素的样式优先级高于父元素（h1），所以直接给h1设置字体权重无法覆盖strong的自带加粗效果，必须直接选中strong标签修改。

如果页面存在优先级更高的内嵌样式，可添加!important强制覆盖：

.template-product h1 strong {
  font-weight: 300 !important;
}

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