HTML/CSS开发问题：自制网页中problem solving文本显示为粉色而非蓝色如何解决

问题排查结果 #

1. 粉色显示的直接原因 #

你当前CSS代码中给h1标签定义的颜色#AB2C5C本身就是偏粉的紫红色，如果你的“problem solving”文本是放在<h1>标签内，就会默认显示为该粉色，这是最高概率的诱因。

2. 蓝色不生效的核心问题 #

你目前提供的CSS代码中，没有任何蓝色相关的样式定义：

• 现有可生效的文本颜色规则只有三个：h1的粉紫色#AB2C5C、.x类的灰黑色#4D5656（带!important优先级）、hover状态下的深红色darkred
• 如果你期望“problem solving”显示为蓝色，需要额外补充对应规则，比如给该文本所在的标签添加类选择器样式：

.problem-solving {
  color: #0000ff; /* 可替换为你想要的具体蓝色色值 */
}

3. 其他可能导致样式覆盖的场景 #

• 如果该文本已经加了蓝色样式，检查是否被更高优先级的规则覆盖：比如文本应用了.x类（带!important优先级最高）、或者是h1标签、或者绑定了id为p1/p2的规则
• 如果该文本是链接（<a>标签），你没有自定义a标签的颜色，会被浏览器默认链接样式覆盖，需要补充a标签的颜色规则

4. 现有CSS代码的语法错误 #

• #p1选择器的width: 150;缺少单位，需要改为width: 150px;才能生效
• 所有列表类（.ol1、.ul1等）的border: 1px 1px 1px 1px;写法错误，border简写语法为border: 线宽 线型 颜色，你可以直接合并为border: 1px solid;即可，无需分开写border-style属性

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