时间戳

首页 > 解决方案 > 在不同的代码区域应用相同的 CSS - div 和类

javascript - 在不同的代码区域应用相同的 CSS - div 和类

问题描述

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

我删除了额外的 html/body 标记，以确保所有代码都包含在一组中 - 在 practice.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>

标签： javascripthtmlcss

解决方案

在您的 CSS 中，您设置MovieDisplay为一个类，带有类标识符.，但在您的 HTML 中，这实际上是一个id.

在你的<div>...

改变这个：id="MovieDisplay"

对此：class="MovieDisplay"

编辑

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

改变这个：.MovieDisplay {...}

对此：#MovieDisplay {...}

推荐阅读