Question

我想确保所有代码共享相同的样式规则。答：目前，我的最后几个div不会响应网站其余部分的CSS，而且我不确定为什么会这样。

我删除了其他html / body标签，以确保所有代码都包含在practise.html文件中的一组中。我不确定该怎么办。

html {
  font-size: 8px;
  background: url(https://i.imgur.com/3sKpysu.jpg) center;
  background-size: 2590x1730;
}

body,
html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

.keys {
  display: flex;
  flex-wrap: wrap;
  flex: 1;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
}

.key {
  border: .4rem solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 1.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  width: calc((100% / 3) - 4rem);
  text-align: center;
  color: white;
  background: rgba(0, 1, 3, 0.4);
  text-shadow: 0 0 .5rem black;
}

.playing {
  transform: scale(1.1);
  border-color: #ffc600;
  box-shadow: 0 0 1rem #ffc600;
}

kbd {
  display: block;
  font-size: 4rem;
}

.sound {
  font-size: 1.2rem;
  text-transform: uppercase;
  letter-spacing: .1rem;
  color: #ffc600;
}

.movieButton {
  border: .4rem solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 3.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  width: calc((100% / 3) - 4rem);
  text-align: center;
  color: white;
  background: rgba(0, 1, 3, 0.4);
  text-shadow: 0 0 .5rem black;
  font-family: sans-serif;
}

.slogan {
  border: .4rem solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 3.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  width: calc((100% / 3) - 4rem);
  text-align: center;
  color: white;
  background: rgba(0, 1, 3, 0.4);
  text-shadow: 0 0 .5rem black;
  font-family: sans-serif;
}

.MovieDisplay {
  border: .4rem solid black;
  border-radius: .5rem;
  margin: 1rem;
  font-size: 3.5rem;
  padding: 1rem .5rem;
  transition: all .07s ease;
  width: calc((100% / 3) - 4rem);
  text-align: center;
  color: white;
  background: rgba(0, 1, 3, 0.4);
  text-shadow: 0 0 .5rem black;
  font-family: sans-serif;
}

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Movies</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <title>Random Movies Generator</title>

  <div class="section-heading">
    <div class="home-section text-center bg-gray">

      <div class="slogan">
        <h2>Favourite Movies <span class="text_color">Generator</span> </h2>
        <h4>Connecting you to the best movies around</h4>
      </div>

      <p>Can't decide on a film? Try the random movies generator button below, which will give you a movie from <strong>IMDB's Top 250 movies</strong> list:</p>
      <br>
      <div id="MovieDisplay">
        <!--Thriller Movies will display here-->
      </div> <br />
      <button class="movieButton" onclick="newMovie()">Random Movie</button>

    </div>
    <script src="movies.js"></script>
  </div>
</body>

</html>

Answer 1

在CSS中，您将MovieDisplay设置为一个类，其类标识为.，但是在HTML中，这实际上是一个id。

在您的<div>上...

更改此项：id="MovieDisplay"

对此：class="MovieDisplay"

修改

根据您的评论，您希望保留ID。在这种情况下，在您的CSS中...

更改此项：.MovieDisplay {...}

对此：#MovieDisplay {...}

在不同的代码区域（div和类）中应用相同的CSS

1 个答案: