网站多页面Logo后缀动态显示及样式不生效问题求助

我来帮你分析下这两个问题的原因和解决办法：

一、样式不生效（点和后缀颜色没变成橙色） #

你CSS里的选择器写错啦！.mil-logo-dot .mil-logo-suffix是后代选择器，意思是找.mil-logo-dot内部的.mil-logo-suffix元素，但实际上这两个<span>是同级的兄弟元素，根本不是嵌套关系。

把选择器改成逗号分隔的并列选择器，就能同时选中这两个元素了：

.mil-frame-top .mil-logo {
  pointer-events: all;
  color: rgb(0, 0, 0);
}

/* 修正后的选择器：逗号分隔，选中两个独立的类 */
.mil-logo-dot, .mil-logo-suffix {
  pointer-events: all;
  color: rgb(255, 152, 0);
  font-weight: 200;
  font-size: 18px;
}

二、JS动态添加后缀不生效 #

你的JS代码里有几个明显的错误：

1. 条件判断用了&位运算符，而不是逻辑与&&，这会导致条件判断逻辑出错；
2. textContent.replace()方法不会直接修改原元素的内容，它只会返回一个新字符串，你需要直接赋值给textContent；
3. 代码里的"Massa."是笔误吧？你的Logo是"Sarra"，而且主页面的.mil-logo-suffix是空的，不需要替换，直接赋值就行；
4. 没有处理回到主页时清空后缀的情况，切换页面后可能会残留内容。

修正后的JS代码如下：

document.addEventListener("DOMContentLoaded", function () {
    const logoElement = document.querySelector('.mil-logo-suffix');
    const metaPage = document.querySelector('meta[name="page"]');

    // 先确保元素存在，避免报错
    if (!logoElement || !metaPage) return;

    const pageType = metaPage.getAttribute("content");
    // 主页清空后缀，其他页面（比如Design页）设置后缀文本
    if (pageType !== "home") {
        // 这里可以根据不同页面设置不同后缀，比如判断pageType是"design"就设为"Design"
        logoElement.textContent = "Design";
    } else {
        logoElement.textContent = "";
    }
});

另外要注意：

• 确保每个页面的<meta name="page">标签的content属性设置正确：主页设为home，Design页面设为design（或者你自定义的标识）；
• 脚本要确保在DOM加载完成后执行，你放在</body>前引入是没问题的，但要保证路径正确。

备注：内容来源于stack exchange，提问作者Adnan Shahin