为什么这些 ID 在我的 PHP 文件中不起作用？答案

【问题标题】：Is There Any Reason Why These IDs are not working in my PHP file?为什么这些 ID 在我的 PHP 文件中不起作用？
【发布时间】：2020-11-05 08:24:09
【问题描述】：

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

编辑

我复制 ID 的唯一原因是因为它是设置文本样式的唯一方法。无论我使用一个新类还是两个新 ID，它们都不起作用。就好像它们在代码中不存在一样。我认为 a 标签的 ID 比新的 span 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;
    }
    
    #submit {
        padding: 8px 50px;
        background-color: #FF9D9D;
        border: none;
    }
    
    .small-text {
        color: #FF9D9D;
    }
    
    footer {
        padding: 20px;
    }
    
    footer a {
        color: #FF9D9D;
    }
    
    #heart {
        color: #FF9D9D;
    }
    
    @media only screen and (max-width: 767px) {
    
        #mainImage{
            padding-bottom: 50px;
        }
    
        section {
            padding: 15px 0 20px;
        }
    
        img {
            padding-bottom: 15px;
        }
    
        h2{
            margin-top: -70px;
        } 
    
        #figure1 {
            display: block;
            margin: 0 auto;
        }
    
        #figure2 {
            display: block;
            margin: 0 auto;
        }
    
        #figure3 {
            display: block;
            margin: 0 auto;
        }
    }
    
    @media only screen and (min-width: 767px) and (max-width: 1029px) {
        img {
            padding-bottom: 15px;
        }
    }

        <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1"><!-- it tells the browser it's a responsove site and it makes the viewport, which is the screen size, to look for the device's width -->
    
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        
        <title>Unexpected Friends - Bootstrap</title>
    
        <!-- Bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link href="css/styles.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
    
        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
        <!--all the above tells IE9 or lower to upload those scripts because you are not very smart and it'll help you-->
      </head>
      <body data-spy="scroll" data-target="#navbar">
         <nav class="navbar fixed-top navbar-expand-md navbar-dark" id="navbar">
           <a class="navbar-brand" href="index.php" id="navbarBrand">
              <span class="navbar-brand" id="unexpected">Unexpected</span><span class="navbar-brand" id="friends">Friends</span>
          </a>
           <!--navbar toggler is the hamburger icon that appears when in smaller screens-->
           <button type="button" class="navbar-toggler" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
             <span class="navbar-toggler-icon"></span>
           </button>
           <div id="navbarNav" class="collapse navbar-collapse">
             <!--ml-auto moves the links to the right-->
              <ul class="navbar-nav ml-auto">
                <li class="nav-item active">
                  <a class="nav-link" href="#ourStory">Our Story<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#gallery">Gallery</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#blog">Blog</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#contact">Contact</a>
                </li>
                <li class="nav-item">
                  <a class="btn btn-outline-light waysToHelp" href="#waysToHelp">Ways To Help</a>
                </li>
              </ul>
           </div><!--navbarNav-->
    
         </nav>

https://jsfiddle.net/HailToTheV612/4qbeh216/6/

第一张图片是在 php 文件中不起作用的代码。

如果我复制 a 标签的 #navbarBrand ID 样式，第二张图片是工作代码：

【问题讨论】：

id 必须是唯一的。您不能在一个页面上多次使用一个 id。
ID 必须是唯一的。如果多个元素需要相同的标识符，请使用一个类。
我做了，但没有任何工作，这就是为什么我问为什么我的唯一 ID 不能工作
您在 HTML 中使用了两次 navbarBrand 3x - 一次在上，两次在嵌套的 s 上。
我明白了。我想你们很困惑。我的问题是我向所述跨度标签添加了两个新的和不同的 ID。我设计了两个 ID，然后什么也没有发生。我尝试添加一个类，因为显然一个类同时针对两个元素，但该类也不起作用。我决定使用 ID，因为它们在类中具有更高的重要性，而那些仍然不起作用。那是我的问题。

标签： php html css bootstrap-4

【解决方案1】：

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

看起来您的代码正在处理您发布的 sn-p（即 #unexpected 和 #friends 样式）。它无法在您的浏览器上显示的原因是，浏览器正在获取缓存的旧 CSS 文件。要刷新缓存，只需使用 ctrl+F5 或使用隐身浏览器。此外，请检查您是否在项目中包含了 CSS 文件。

【讨论】：