网页CSS样式未全部生效：添加删除img元素后样式失效如何排查解决？

核心结论 #

你的CSS样式失效和选择器优先级无关，问题主要来自HTML结构错误、选择器不匹配、ID使用不符合规范三个方面，具体问题和修复方案如下：

具体问题 #

• HTML结构非法：你将两个<nav>元素（#title1和#navbuttons）放在了</head>结束标签和<body>开始标签之间，不属于标准DOM结构，浏览器解析时会出现匹配异常，导致对应样式不生效。
• 选择器不匹配：你的CSS中写的是#body（ID选择器，仅匹配id="body"的元素），但HTML的<body>标签没有设置id="body"属性，导致整个页面基础样式完全未生效。
• ID重复使用：HTML规范要求单页面内ID必须唯一，你多处重复使用id="type"、id="time"、id="price"，浏览器只会匹配第一个对应ID的元素，后续同ID元素样式不会生效。
• 属性语法错误：text-decoration属性仅填写了颜色值，未指定线型，该属性不会生效，正确语法为text-decoration: 线型 颜色，不需要装饰时写text-decoration: none。

修复方案 #

1. 调整HTML结构，将两个<nav>元素全部移动到<body>标签内部，放在<main>标签之前。
2. 将CSS中的#body选择器修改为body（标签选择器，直接匹配页面body元素），或者给HTML的<body>标签添加id="body"属性，前者更符合开发规范。
3. 把重复ID改为类选择器：
   • CSS中把#type、#price、#time分别修改为.type、.price、.time
   • HTML中对应<th>、<td>的id属性替换为class属性，例如<td class="type">IELTS</td>
4. 修正text-decoration属性，补充线型参数。
5. 确认CSS文件路径正确，portfolio.css和HTML文件存放在同一级目录下。

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