这些 ID 在我的 PHP 文件中不起作用有什么原因吗？

Question

我正在尝试在我的 PHP 网站上制作徽标动画。我需要将徽标的两个单词分成不同的范围。我想摆脱两个跨度标签之间的空白，所以我开始寻找答案......并发现了一个问题。基本上，当我向每个 span 标记添加 ID 时，即使我复制两个 ID 的样式，或者添加新的文本颜色，它也不起作用。就好像 ID 不起作用一样。Span 标签位于一个具有正确格式的 ID 的标签内，我确实尝试删除它，但即使这样它也不起作用。让它发挥作用的唯一方法是复制 ID，这是一个不好的做法。我正在附加一个 jsfiddle ，一切正常，但在我的文件中却不起作用。

编辑

我复制 ID 的唯一原因是它是设置文本样式的唯一方法。无论我使用一个新类还是两个新 ID，它们都不起作用。就好像它们不存在于代码中一样。我认为 a 标签的 ID 比新的跨度 ID 更重要，但即使我删除它，它也不起作用。

我进行了编辑以包含不反映更改的新标签。#unexpected 和 #friends 的造型颜色：蓝色；它只是不显示在浏览器上。

      * { 

        font-family: Montserrat, Helvetica, sans-serif;

        color: #828282;

    }

    

    @font-face {

        font-family: "Riffic";

        src: url(../Riffic.ttf);

        src: url(../Riffic/rifficfree-bold-webfont.woff);

    }

    

    @keyframes logo{

    

    }

    

    body {

        padding-top: 65px;

        position: relative;

    }

    

    #navbar {

        background: #FF9D9D;

    }

    

    #navbarBrand{

        font-family: 'Riffic', sans-serif;

        color: white;

        font-size: 26px;

    }

    #unexpected, #friends {

        color: blue;

    }

    .navbar-dark .navbar-nav .nav-link {

        color: rgba(255,255,255,1);

    }

    

    .navbar-dark .navbar-toggler {

        color: rgba(255,255,255,1);

        border: solid 2px rgba(255,255,255,.5);

    }

    

    .btn-outline-light:hover {

        color: #FF9D9D;

    }

    

    a.btn.btn-outline-light.waysToHelp:active {

        color: #FF9D9D;

    }

    

    .waysToHelp {

        margin-left: 10px;

    }

    

    .waysToHelp:hover {

        color: #FF9D9D;

    }

    

    #mainImage {

        padding-bottom: 100px;

    }

    

    section {

        padding: 58px 0 80px;

    }

    

    h1 {

        color: #FF9D9D;

        padding: 10px 0 25px;

    }

    

    h2 {

        color: #FF9D9D;

        padding: 10px 0 25px;

    }

    

    figure {

        max-width: 435px;

    }

    

    #figCaption {

        color: #FF9D9D;

        font-weight: 500;

        font-style: italic;

    }

    

    #projectCol {

        margin-top: 100px;

    }

    

    #message {

        color: #828282;

    }

Answer 1

我进行了编辑以包含不反映更改的新标签。#unexpected 和 #friends 的造型颜色：蓝色；它只是不显示在浏览器上。看起来您的代码正在处理您发布的代码片段（即#unexpected和#friends样式）。它无法在浏览器上显示的原因是，浏览器正在获取缓存的旧 CSS 文件。要刷新缓存，只需使用 ctrl+F5 或使用隐身浏览器即可。此外，请检查您的项目中是否包含 CSS 文件。