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

Posted 2023-02-24

【中文标题】如何正确地将 CSS 应用于 PHP 回显？

【英文标题】：How do I properly apply CSS to a PHP echo?

【发布时间】：2019-09-23 16:27:39

【问题描述】：

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

步骤如下：

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

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

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

将“成功”类分配给 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 = "[e-mail]";

        // 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”的问题。欢迎对代码提出任何批评，无论多小或微不足道。

【问题讨论】：

那不是 PHP。

这就是 ajax

您的 #sendmessage <div> 不是 .form 的子代，因此 CSS 选择器 #contact .form .success 将不适用

您还应该将：$(formMessages).removeClass('error'); 等更新为 formMessages.removeClass('error');

【参考方案1】：

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

#contact #sendmessage.success color:green;

【讨论】：

感谢您的帮助，但没有骰子。没有实质性的变化，也没有错误，但仍然没有应用正确的 CSS。

试试#sendmessage.success /*color:green;*/

做到了！我一直很困惑。我使用的每个开发工具的路径都是#sendmessage，但我尝试过之后认为这是一个错误。我没有附加添加的 .success 部分。谢谢！