CSS 样式在带有 php 脚本的 <small> 标记中不起作用

Question

我遇到了一个问题，如果我使用引导类来设置包含 PHP 脚本的标签的样式，它可以工作。但是，当我使用自己的样式并使用 ID 或类为其添加颜色时，它不会。我不确定为什么使用引导程序的 php 文本样式，但不是使用常规 ID 或类。我附上了代码和 PHP 变量的图片，其中包含在输入为空时回显的文本。我将样式直接添加到 PHP 字符串中并且它可以工作，但我不知道如果不是这样设置它为什么不能

<section id="contact">
    <div class="container-fluid">
        <div class="row">
            <div class="col">
                <h1 class="text-center">We Want to Hear from You!</h1>
            </div><!--col-->
          </div><!--row-->
          <div class="row">
            <div class="col-md-10 offset-md-1">
              <form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post">
                  <div class="row">
                    <div class="form-group col-md-4">
                        <small class="small-text"><?php if(isset($firstNameError)){echo $firstNameError;}?></small>
                        <label for="firstName" class="sr-only">First Name</label>
                        <input type="text" class="form-control" id="firstName" placeholder="First Name" name="firstName">
                    </div><!--col-md-4-->
                    <div class="form-group col-md-4">
                      <small class="text-danger"><?php if(isset($lastNameError)){echo $lastNameError;}?></small>
                      <label for="lastName" class="sr-only">Last Name</label>
                      <input type="text" class="form-control" id="lastName" placeholder="Last Name" name="lastName">
                  </div><!--col-md-4-->
                  <div class="form-group col-md-4">
                    <small class="text-danger"><?php if(isset($emailError)){echo $emailError;}?></small>
                    <label for="email" class="sr-only">Email</label>
                    <input type="email" class="form-control" id="email" placeholder="Email" name="email">
                </div><!--col-md-4-->
                <div class="form-group col">
                  <small class="text-danger"><?php if(isset($messageError)){echo $messageError;}?></small>
                  <label for="message" class="sr-only">Message</label>
                  <textarea id="message" class="form-control" rows="6" name="message">Message</textarea>
                </div>
                <div class="col-md-12 text-center">
                  <button class="text-center btn btn-dark btn-lg" type="submit" name="submit" value="Submit" id="submit" role="button">Submit</button>
                </div>
                <?php 
                    if(isset($_POST["submit"])) {
                      echo "<h4 class='text-success'>Your message has been sent. We will contact you shortly :)!</h4>";
                    }
                ?>
              </div><!--row-->
            </form>
            </div><!--col-->
        </div><!--row-->
    </div><!--container-->
 </section>

--------CSS--------

 * { 
    font-family: Montserrat, Helvetica, sans-serif;
    color: #828282;
}

@font-face {
    font-family: "Riffic";
    src: url(../Riffic.ttf);
    src: url(../Riffic/rifficfree-bold-webfont.woff);
}

body {
    padding-top: 65px;
    position: relative;
}

#navbar {
    background: #FF9D9D;
}

#navbarBrand {
    font-family: 'Riffic', sans-serif;
    color: white;
    font-size: 26px;
}

.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;
    }
}

Answer 1

我有一些与您的问题很接近的问题，它与#FFF 相关，有时它在 php 代码中时无法在浏览器中正确翻译（我不知道为什么），请在浏览器中打开检查元素并查看 css像<small style="color:#whatever ; " >一样正确应用，如果它像它一样锁定只是清除浏览器数据（crt+shfit+del），或者您可以将样式更改为类并解决问题。