Question

我遇到的问题是我的CSS代码的顺序影响了我网页上的完成样式，而且我没有任何重复的选择器，这让我很困惑。

例如，如果我复制我的.coverContainer类选择器属性并将其粘贴到我的CSS页面的顶部，则会出现问题，即背景变为白色，因此我的样式属性不会应用。此外，我似乎无法让我的CSS为我的.coverHomeLink或我的footer工作。

附上我的代码段。任何想法为什么我的选择器不工作？除非有重复的选择器，否则我认为CSS代码的顺序无关紧要？仅供参考，我在项目中使用了normalize.css，但为了简单起见，我没有将其包括在内。

<!--====================================
      NAV/COVER SECTION
======================================-->

.coverHomeLink {
  text-decoration: none;
  font-family: 'Alegreya Sans SC', sans-serif;
  color: white;
}

.navbarButton {
  background-color: inherit;
  border: none;
}

.navbarFlexContainer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbarMenu {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-family: 'Questrial', sans-serif;
}

.navbarMenu a {
  align-self: right;
  margin-left: auto;
  padding: 10px 12px;
  background-color: #3e465b;
  border-color: #ecc445;
  border-style: none;
  width: 60px;
  text-decoration: none;
  color: white;
}

.navbarMenu a:hover {
  color: #ecc445;
}

.mainTitle {
  padding: 180px 10px;
  color: white;
  font-family: 'Alegreya Sans SC', sans-serif;
}

.coverContainer {
  padding: 20px;
/*  position: relative;*/
  background: linear-gradient(105deg, #3e465b 55%, #ecc445 250%);
}


<!--====================================
      WORK SECTION
======================================-->

.workSection {
  padding: 40px 20px;
}

.workProject {
  border: 1px solid #f2f2f2;
  border-radius: 3px;
}

.projectImage {
  padding: 100px 0px;
  background-color: rgb(245,245,245);
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
}

.visitWebsiteButton {
  padding: 12px 18px;
  background-color: #ecc445;
  border-color: #ecc445;
  border-radius: 7px;
  border-style: none;
  color: white;
}


<!--====================================
      FOOTER  
======================================-->

footer {
  padding: 15px 20px;
  padding-bottom: 10px;
  background-color: #3e465b;
}

<!DOCTYPE html>

<html lang="en">
  
  <head>
    <!-- Required meta tags -->
    <link rel="stylesheet" href="normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:800|Archivo+Black|Questrial|Roboto" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
    <title>My Name | Work</title>
  </head>

  <body>
    
<!--====================================
      NAV/COVER SECTION
======================================-->

    
    <div class="coverContainer">
      <nav class="navbar">
        <div class="navbarFlexContainer">
          <a href="#" id="test" class="coverHomeLink">My Name</a>
          <button href="#" class="navbarButton"><img src="img/navbarImage.svg"></button>
        </div>
        <div class="navbarMenu">
          <a href="#" style="color:#ecc445">Work</a>
          <a href="#">About</a>
          <a href="#">Contact</a>
        </div>
      </nav>
    
      <div class="mainTitle">
        <h1 class=""><span>&times;</span> Text Here.... <span>&times;</span></h1>
        <h2>Insert tag line here, to be determined...</h2>
      </div>
    </div>
    
<!--====================================
      WORK SECTION
======================================-->
    
    <div class="workSection"> <!-- Work Section -->
    
      <div class="workProject">
        <div class="projectImage">
          <h3>Project Name</h3>
        </div>
        <p>
          <a href="#project1About" class="aboutProjectLink">About Project</a>

          <button href="#" class="visitWebsiteButton">Visit Website</button>
        </p>
        <div id="project1About" class="aboutProjectDiv">
          <p>fkldsjjffkdls fdjsjfkds uri. jfdksajfjdsjfl;kdjs. jfkdsjfljjsd.</p>
          <p>fkldsjjffkdls fdjsjfkds uriewuriwe fdjksljndkl f djskfjd jfdk jfkdsjkfd kfjdfkdjflkjdk fjdjf kdjkfjdkfjdkf jdkfjdkfjkdfjklj . fkjkdjkjeijeifjijeijeijeijeijc ije jeke knkcdknckdkcndjkncdjcndjncjkdnl fjdksjfl jkfdls dkjcnkeijiejijfkds jiefjifehfe.</p>
          <p>fkldsjjffkdls fdjsjfkds uriewuriwe fdjksljndkl f djskfjd jfdk jfkdsjkfd kfjdfkdjflkjdk fjdjf kdjkfjdkfjdkf jdkfjdkfjkdfjklj . fkjkdjkjeijeifjijeijeijeijeijc ijefehfe.</p>
        </div>
      </div>
    </div>  <!-- /Work Section -->
    
<!--====================================
      FOOTER  
======================================-->
    <footer>
      <div>
        <ul>
          <li>Work</li>
          <li>About</li>
          <li>Contact</li>
        </ul>
      </div>
    </footer>
      
<!--====================================
      SCRIPTS
======================================-->
    
    
  </body>
</html>

Answer 1

您是否查看了浏览器Web开发人员工具的 DOM Inspector 的计算样式部分？

在Waterfox（和Firefox）中，在右侧面板中选择 Inspector 中的元素后，单击 Computed 选项卡。单击时，向右箭头将显示应用哪些样式，哪些样式未应用。

您是否意识到CSS代表 Cascading 样式表对吗？

h1 {float: left;}
h1 {float: none;}

h1元素不 float因为第二个定义将其设置为而不是 float。努力理解CSS，你就会明白。

Answer 2

原来我的html使用了css个评论标记，例如，而不是正确的css评论标记，例如/* NAV SECTION */，这弄错了我的文件。

为什么我的CSS代码的顺序会影响我的网页中的样式

2 个答案: