如何避免自定义CSS的strong样式影响全站其他内容

你的判断完全正确，当前问题是你使用了全局的strong选择器，导致页面所有加粗内容都被应用了对应样式，只需要调整选择器作用范围即可解决。

优先选择p.box.info strong作为修改后的选择器，该方案不需要修改现有提示框的HTML结构，仅通过后代选择器就能实现只对提示框内的加粗内容生效，不会影响其他区域的<strong>标签。

修改后的完整CSS代码如下：

body
{
    background: #eee; /* 方便元素展示 */
}
p.box.info {
    background: #DEEFFF;
    border-radius: 5px;
    box-sizing: inherit;
    color: #004AAD;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 18px;
    line-height: 27px;
    margin-bottom: 2rem;
    margin-top: 0px;
    padding: 2rem;
}
/* 仅匹配提示框内的strong标签 */
p.box.info strong {
    box-sizing: inherit;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 27px;
}
@media (prefers-reduced-motion: reduce) {
    p.box.info {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
    }
    /* 同样缩小匹配范围 */
    p.box.info strong {
        animation-duration: 0s !important;
        transition-duration: 0s !important;
    }
}

不推荐你提到的strong.box方案，该方案需要你手动给所有提示框内的<strong>标签添加box类名，额外增加了HTML修改成本，后代选择器方案更简便。

修改后提示框效果保持不变：

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