如何修复CSS样式不解析问题？引入CSS后.test类样式未生效排查

样式完全不生效的核心原因有两个：

• 引入CSS的标签用错了。你当前用<script>标签加载CSS文件，这个标签是专门用来引入JavaScript脚本的，浏览器不会把它加载的内容识别为样式表，所有写在CSS文件里的规则自然完全不会生效。
• CSS代码里存在无效属性。你写的font: optional;是非法写法：optional是@font-face规则中font-display属性的可选值，不属于font简写属性的合法取值，这行代码本身不会被浏览器解析，属于无效代码。

1. 替换HTML里的CSS引入标签
   把head里原来错误的引入代码：

<script src="/www/style.index.html.css"></script>

替换为标准的样式表引入标签：

<link rel="stylesheet" href="/www/style.index.html.css">

替换后可以打开浏览器开发者工具，切到「网络」面板刷新页面，确认这个CSS文件的请求状态码是200，如果报404就说明文件路径写的不对，调整成CSS文件实际的存放路径即可。

2. 修正CSS里的无效代码
   把非法的font: optional;行删掉，或者改成合法的字体相关属性配置，修正后的CSS参考：

.test{
    /* 不需要设置字体就直接删掉font相关行，这里给个合法写法示例 */
    font-size: 24px;
    color: red;
}

后续排查样式问题可以直接右键目标元素选「检查」，在开发者工具的元素面板里看右侧的样式栏：如果看不到你写的.test规则，优先排查CSS文件加载、选择器拼写问题；如果能看到规则但是对应属性被划了删除线，要么是属性值非法、要么是被更高优先级的样式覆盖，工具会直接标出问题原因。

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