页脚代码在 CSS 样式表中显示为红色，但 HTML 代码正常

Question

之前没有出现错误...我昨晚试图保存我的文件时才注意到它。有什么问题吗？因为我查看了 HTML 代码，似乎没有任何问题。

footer {
  background-color: #023440;
  padding: 30px;
  margin-top: 800px;
  bottom: 0px;
}

.logo-footer {
  height: 70px;
  width: auto;
  float: left;
  margin-top: 60px;
  margin-left: -20px;
  margin-bottom: 25px;
  cursor: pointer;
}

.footer-nav {
  list-style: none;
  float: none;
  margin-bottom: 20px;
}

.social-links {
  list-style: none;
  float: right;
  margin-top: -40px;
  padding-right: 5px;
}

.footer-nav li,
.social-links li {
  display: inline-block;
  margin-right: 20px;
  font-size: 90%;
}

.footer-nav li:last-child,
.social-links li:last-child {
  margin-right: 0;
}

.footer-nav li a:link,
.footer-nav li a:visited,
.social-links li a:link,
.social-links li a:visited {
  text-decoration: none;
  border: 0;
  color: #a3a3a3;
  font-weight: 400;
  transition: color 0.3s;
}

.footer-nav li a:hover,
.footer-nav li a:active {
  color: #fff;
  font-weight: 400;
}

.social-links li a:link,
.social-links li a:visited {
  font-size: 135%;
}

.footer-address p {
  color: #fff;
  font-size: 90%;
  display: block;
  float: left;
  line-height: 1.5;
  margin-bottom: 30px;
}

.copyright {
  color: #fff;
  text-align: center;
  font-size: 80%;
  display: block;
  margin-left: 0px;
  margin-top: 25px;
}

.copyright:before {
  display: block;
  height: 0.1px;
  background-color: #045d71;
  content: " ";
  width: 100%;
  margin: 0 auto;
  margin-bottom: 25px;
}

.ion-social-linkedin,
.ion-social-instagram,
.ion-social-twitter {
  transition: color 0.3s;
}

.ion-social-linkedin:hover {
  color: #007bb5;
}

.ion-social-instagram:hover {
  color: #e95950;
}

.ion-social-twitter:hover {
  color: #55acee;
}

.email-footer {
  text-decoration: none;
  color: #fff;
  transition: color 0.3s, border-bottom 0.3s;
}

.email-footer:hover {
  color: #a3a3a3;
  border-bottom: 0.5px solid #a3a3a3;
}

<footer>
  <div class="row">
    <div class="span-3-of-3">
      <ul class="footer-nav">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Projects</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Blog</a></li>
      </ul>
    </div>
    <div class="span-3-of-3">
      <ul class="social-links">
        <li><a href="#"><i class="ion-social-linkedin"></i></a></li>
        <li><a href="#"><i class="ion-social-instagram"></i></a></li>
        <li><a href="#"><i class="ion-social-twitter"></i></a></li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="span-3-of-3">
      <img src="resources/img/euphoric%20Logo%20footer-01.png" alt="euphoric-logo-footer" class="logo-footer">
    </div>
  </div>
  <div class="row">
    <ul class="footer-address">
      <p>40 Alison Road.<br>
        <a class="email-footer" a href="#">info@euphoric.co</a></p>
    </ul>
  </div>
  <div class="row">
    <p class="copyright"> Copyright &copy; 2020, Euphoric. All rights reserved.</p>
  </div>
</footer>

之前没有出现错误...我昨晚试图保存我的文件时才注意到它。有什么问题吗？因为我查看了 HTML 代码，似乎没有任何问题。

Answer 1

如果您在任何 text/code 编辑器中打开您的代码，您会发现其中有很多错误，例如：

.pos-info: before {

在 : 和之前的

之间不应有 space

padding: 0 auto;

chrome 将其标记为无效

.img_description:hover {
    transform
    
}

属性没有值

.pos-content: after {

同样，在 : 和之后

之间不应有 space

编辑：发现更多错误：

在线 921

.cloud-content {

没有结束标签，这会破坏它后面的所有内容。这可能是造成您大部分问题的原因。

页脚代码在 CSS 样式表中显示为红色，但 HTML 代码正常

Footer code displays red in CSS stylesheet, but HTML code is fine

html

css

compiler-errors

footer