CSS样式表已加载但HTML未应用样式，请求问题排查

问题根源 #

1. CSS注释语法错误：CSS文件中使用了HTML的注释语法<!-- ... -->，这会干扰浏览器对CSS代码的解析，CSS的标准注释应为/* ... */。
2. 重复ID导致样式匹配失效：HTML中存在两个id="second-row"的元素，ID在HTML规范中必须唯一，重复的ID会使CSS选择器仅作用于第一个匹配元素，后续元素无法应用样式。
3. HTML属性书写不规范：链接CSS的<link>标签中，type="text/css"与href属性之间缺少空格，虽部分浏览器可容错，但可能引发解析异常。

修正后的代码 #

CSS文件（quen-somos.css）

/* Estilos do header*/
body {
    margin: 0px;
}
header {
    width: 100%;
}
/* Primeira parte*/
#first-row {     
    background-color: red;
    float: right;
    padding: 10px 30px 10px 0px;
}
/* Segunda Parte*/
.second-row {   
    background-color: white;
    float: left;
}
#limpa {
    clear: left;
    background-color: inherit;
    margin: 30px;
    font-family: Algerian, "Times New Roman", Arial;
    text-decoration: none;
    color: black;
}
/* Terceira e última parte*/

HTML文件

<!DOCTYPE html>
<html lang="es">
<head>
    <title>Quen Somos?</title>
    <link rel="stylesheet" type="text/css" href="./quen-somos.css">
    <link rel="icon" type="image/x-icon" href="../IMAXES/Estrela.png">
    <meta name="keywords" content="Erguer, Galiza, organización estudantil, ANC, 2016, sindicato de estudantes">
    <meta charset="Utf-8">
</head>
<body>
    <header>
        <div class="second-row">
            <a href="https://www.youtube.com/channel/UCcr33NXAArfvqIwW4C_AdXg"><img src="../IMAXES/Youtube.png" alt="Icona de Youtube" width="15px"></a>
            <a href="https://www.instagram.com/erguergaliza/?hl=en"><img src="../IMAXES/Instagram.jpg" alt="Icona de Instagram" width="15px"></a>
            <a href="https://www.facebook.com/erguergaliza/?locale=es_ES"><img src="../IMAXES/Facebook.jpg" alt="Icona de Facebook" width="15px"></a>
            <a href="https://twitter.com/erguergaliza?lang=en"><img src="../IMAXES/Twitter.png" alt="Icona de Twitter" width="15px"></a>
        </div>
        <div class="second-row">
            <img src="../IMAXES/Erguer.png" alt="Símbolo de Erguer">
            <a href="#" id="limpa">Membros de Erguer</a>
        </div>
    </header>
    <main>
    </main>
</body>
</html>

修改说明 #

• 替换CSS中的注释语法为标准CSS注释，确保样式解析正常。
• 将重复的id="second-row"改为class="second-row"，对应CSS选择器从#second-row改为.second-row，确保所有同类元素都能应用样式。
• 修正<link>标签的属性间距，符合HTML书写规范。

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