为何我的CSS中h1、h3样式块在Safari浏览器中不生效？

你的问题出在CSS原生嵌套语法的浏览器兼容性上。Chrome已支持原生CSS嵌套，但Safari需要版本15.4及以上才能识别该语法，旧版Safari无法解析header内部嵌套的h1、h3选择器，导致这部分样式失效。

解决方案 #

方案1：改用常规后代选择器写法（兼容性最优） #

将嵌套样式展开为标准CSS选择器写法，所有浏览器都能正常识别：

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 160px; /* 原代码漏写单位，需补充px/rem等有效值 */
    font-family: Cochin;
}

body {
    width: 90%;
    margin: auto;
}

header {
    background: url("../images/background_cover.jpg");
    background-size: cover;
}

header h1, header h3 {
    display: grid;
    place-items: center;
    color: white;
    padding: 1.5rem;
}

header h3 {
    font-size: clamp(1rem, 1.2vw, 3rem);
    padding: 2rem;
}

方案2：升级Safari版本 #

若坚持使用原生CSS嵌套语法，需将Safari升级至15.4或更高版本，该版本开始正式支持原生CSS嵌套特性。

方案3：使用CSS预处理器 #

如果需要保留嵌套写法的同时兼容多浏览器，可借助Sass、Less等预处理器，将嵌套语法编译为浏览器兼容的常规CSS后再部署。

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