Question

我正在学习初学者Web开发课程，而我正在从事的作业要求我为页面重新创建标记。给我一个.html文件，只允许使用CSS进行更改。分配的目的是使获得的.HTML文件看起来完全像标记。

我的问题是，有2个h1 / h2标签，其中一对位于标头中，一对位于主标签中。我想对标题中的第一对h1 / h2标签进行更改。由于某些原因，这两对都位于header标记内，我不知道如何通过CSS进行更改。

在提供的屏幕截图中，标记位于左侧，我的进度位于右侧。[https://www.dropbox.com/s/ghdl3p1n311vs4q/Screenshot%202020-05-17%2017.28.40.png?dl=0]

有人可以解释一下为什么即使只有一对标签驻留在标头中，两个标签都受标头影响吗？以及仅更改一对的解释？

HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
   <link href= "reset.css" rel = "stylesheet"  />
   <link href= "hw2-problem2.css" rel = "Stylesheet" >
   <meta charset="utf-8">
   <title>Art Store</title>
   <link href='http://fonts.googleapis.com/css?family=Merriweather' rel='stylesheet' type='text/css'>

</head>
<body>
   <header>
     <h1>Art Store</h1>
     <h2>Super cool tagline will go here</h2>
   </header>
   <main>
      <h2>Still waiting</h2>
      <p id="announcement">Our website will be live in</p>
      <p id="timeline">4 years, 3 months, and 2 days<sup>*</sup></p>   
       <p id="footnote"><sup>*</sup>hopefully</p>
   </main>
  <footer>
        <h2>Recent Acquisitions</h2>
        <div>
            <img src="images/07020.jpg" alt="Liberty Leading the People">
            <img src="images/05030.jpg" alt="The Death of Marat">
            <img src="images/106020.jpg" alt="Girl with a Pearl Earring">
        </div>
  </footer>   
</body>
</html>

CSS Code: 
body {
    background-image: url("images/art-background4.jpg");
    background-size: 100% 100%;
    padding: 12.55em 6.27em;
    margin: 6.27;


  }

  header{
    position:absolute;
    top:2em;    
    left:2em; 
    padding: 2em;
    background-color: hsla(0, 0%, 0%, 0.473);
  }

  h1{
    font-size: 6em;
    color: white;
    margin-bottom: 2em;

  }

  h2{
    margin: 2em;
  }

Answer 1

h1选择器引用了您网站上的所有h1标签。

要在标题中引用h1标签，请写：

header h1 {
/* CSS properties */
}

Answer 2

您可以使用以下CSS选择器更改标头h1 / h2。

header > h1 {
  /* Put your styles here */
}

header > h2 {
 /* Put your styles here */
}

您可以在w3schools上了解有关CSS选择器的更多信息。

初学者HTML / CSS练习

2 个答案: