我的 css 更改没有显示 H1 和 h2 问题

Question

我正在学习前端，一整天都遇到了一个问题。我正在尝试将文本转换为大写，更改字体大小、位置等，但更改未显示在网页上我尝试在 css 页面上使用 .h1{} 但仍然没有变化。我确定我保存了我的项目，但没有任何改变。

这是我的html代码


 <section class="intro" id="home">
    <div class="row justify-content-center">
    <div class ="section-vid2">
      <video autoplay loop muted src="http://luxtopia.org/wp-content/uploads/2022/02/GIF.mp4" ;> </source>
    </div>
    <div class="col-4">
      <h1 class="text-center"><br> join the </h1>
      <p>  welcome to my web page </p>
    </div>
   
  </div>
</section>

CSS

.intro .col-4 .h1{
  display: block;
  font-family: 'Varela Round', sans-serif;
  font-size: 34px;
  text-transform: uppercase;

}

Answer 1

以 .（句点）开头的选择器基于 class

从 dom 中选择

以 # 开头的选择器根据元素 ID

从 dom 中选择

没有任何前缀的选择器通过 html 标签选择，即 h1

试试 .intro .cold-4 h1{}

Answer 2

你应该只获取你想要更改的 ID，所以你只需要获取“text-center”，你就可以更改字体 size/position 以及任何你喜欢的东西.试试这个

.text-center{
    display: block;
    font-family: 'Varela Round', sans-serif;
    font-size: 34px;
    text-transform: uppercase;
}

如果这不起作用，您需要确保您的样式 sheet 已链接到 head 元素中。

我的 css 更改没有显示 H1 和 h2 问题

My css changes doesn't show H1 and h2 problems

html

css

frontend