如何正确地将 CSS 应用于 PHP 回显？

Question

在我提交联系表单以采用其适当的 CSS 后，我无法获得成功消息。

步骤如下：

1. 用户将他们的数据输入到联系表单中。

2. 该表单信息被定向到外部 PHP 脚本，该脚本将信息发送到电子邮件地址。

3. 提交表单后，PHP 会以 DIV 元素的形式出现回显，内容类似于“您已成功！” （到现在为止，这是在嘲弄我）。

4. 将“成功”类分配给 DIV 元素，最终应应用相应类的 CSS

表单上的所有内容都运行良好，除了回显。虽然应用了适当的类，但 DIV 元素没有实际变化。简单来说，我希望文本是绿色的，但它保持黑色。

HTML 表格：

          <div class="col-lg-5 col-md-8">
            <div id="sendmessage" ></div>
            <div id="errormessage"></div>
            <div class="form">
              <form action="php/contactform.php" method="post" role="form" class="contactForm" id="contactForm">
                <div class="form-group">
                  <input type="text" name="name" class="form-control" id="name" placeholder="Your Name" data-rule="minlen:4" required />
                </div>
                <div class="form-group">
                  <input type="email" class="form-control" name="email" id="email" placeholder="Your Email" data-rule="email" required />
                </div>
                <div class="form-group">
                  <input type="text" class="form-control" name="subject" id="subject" placeholder="Subject" data-rule="minlen:4" required />
                </div>
                <div class="form-group">
                  <textarea class="form-control" name="message" id="message" rows="5" data-rule="required" required placeholder="Message"></textarea>
                </div>
                <div class="text-center"><button type="submit" name="submit">Send Message</button></div>
              </form>
            </div>
          </div>

CSS：

#contact .form .success {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #468847;
  background-color: #dff0d8;
  border: 1px solid #d6e9c6;
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

#contact .form .error {
  padding: 1em;
  margin-bottom: 0.75rem;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  color: #b94a48;
  background-color: #f2dede;
  border: 1px solid rgba(185, 74, 72, 0.3);
  -webkit-border-radius: 4px;
     -moz-border-radius: 4px;
          border-radius: 4px;
}

PHP：

<?php
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // Get the form fields and remove whitespace.
        $name = strip_tags(trim($_POST["name"]));
                $name = str_replace(array("\r","\n"),array(" "," "),$name);
        $subject = strip_tags(trim($_POST["subject"]));
                $subject = str_replace(array("\r","\n"),array(" "," "),$subject);
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $message = trim($_POST["message"]);

        // Check that data was sent to the mailer.
        if ( empty($name) OR empty($subject) OR empty($message) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
            // Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Oops! There was a problem with your submission. Please complete the form and try again.";
            exit;
        }

        // Set the recipient email address.
        // FIXME: Update this to your desired email address.
        $recipient = "me@cbonilla.dev";

        // Set the email subject.
        $subject = "Subject: $subject";

        // Build the email content.
        $email_content = "Name: $name\n";
        $email_content .= "Email: $email\n\n";
        $email_content .= "Message:\n$message\n";

        // Build the email headers.
        $email_headers = "From: $name <$email>";

        // Send the email.
        if (mail($recipient, $subject, $email_content, $email_headers)) {
            // Set a 200 (okay) response code.
            http_response_code(200);
            echo "Thank You! Your message has been flarged.";
        } else {
            // Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Oops! Something went wrong and we couldn't send your message.";
        }

    } else {
        // Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "There was a problem with your submission, please try again.";
    }

?>

我不会链接到 Ajax，因为它已经应用了适当的类。

我会继续寻找迭代，但我认为这归结为“你只是不知道 CSS”的问题。欢迎对代码提出任何批评，无论多小或微不足道。

Answer 1

您正在尝试将success 类附加到sendmessage。为此，您的 CSS 内容应如下所示，

#contact #sendmessage.success {color:green;}