页脚代码在CSS样式表中显示为红色，但是HTML代码很好

问题描述

错误并没有更早出现……昨晚我尝试保存文件时才注意到它。有什么问题吗？因为我看过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="#">[e-mail]</a></p>
    </ul>
  </div>
  <div class="row">
    <p class="copyright"> copyright &copy; 2020,Euphoric. All rights reserved.</p>
  </div>
</footer>

错误没有更早出现……昨晚我尝试保存文件时才注意到它。有什么问题吗？因为我看过HTML代码，似乎一切都没有。

解决方法

如果在任何文本/代码编辑器中打开代码，就会发现其中存在很多错误，例如：

.pos-info: before {

：和之前之间不应有空格

padding: 0 auto;

chrome将其标记为无效

.img_description:hover {
    transform
    
}

没有价值的财产

.pos-content: after {

再次：：与之后之间不应有空格

编辑：发现更多错误：

在线921

.cloud-content {

没有结束标记，该标记会破坏其后的所有内容。这可能是造成您大多数问题的原因。