html - 我错过了什么？CSS中的字体颜色

Question

如果我在下面编写相同的代码块但不包含“body”元素（它似乎也没有做任何事情），那么我的 h1 文本保持黑色。为什么会这样？如果我理解正确，我应该能够添加 h1 部分并且它应该改变颜色对吗？

编辑：我想澄清我想排除“身体”部分，并想了解为什么我不能。作为另一个例子，我之前在代码中设置了图像的大小。当我将这些设置放在 h1 部分之前时，h1 改变了颜色。如果 h1 在之后，那么它再次保持黑色。

   <style>
    
    body{
      color: pink;
    }
    h2{
      color: blue;
    }
    
    </style>

    <h1 id="title" class="title">Katherine Johnson</h1>
    <div id="img-div">
      <img id= "image"    src="https://www.nasa.gov/sites/default/files/thumbnails/image/26646856911_ca242812ee_o_1.jpg" alt="Katherine Johnson" class="center">
      <h2 id="tribute-info"><ul> <li>Born in White Sulphur Springs, West Virginia, in 1918, her intense curiosity and brilliance with numbers vaulted her ahead several grades in school.</li> </li>By 13, she was attending the high school on the campus of historically black West Virginia State College. </li> <li>At 18, she enrolled in the college itself, where she made quick work of the school’s math curriculum and found a mentor in math professor W. W. Schieffelin Claytor, the third African American to earn a PhD in mathematics. </li> <li>She graduated with highest honors in 1937 and took a job teaching at a black public school in Virginia. </li> </ul></h2>  
      <a id="tribute-link" target="_blank" href="https://www.nasa.gov/content/katherine-johnson-biography"> Learn more about Katherine here</a>
      
    </div>

标签： htmlcss

Answer 1

您提供了 class 和 id 以使 CSS 生效。使用 class/id 来使 CSS 生效，而不是使用锚标签。

<style>

body{
  color: pink;
}
h2Class{
  color: blue;
}

</style>



<h1 id="title" class="h2Class">Katherine Johnson</h1>