即使使用 !important 规则，容器类 css 声明也不起作用答案

【问题标题】：container class css declaration doesn't work even with !important rule即使使用 !important 规则，容器类 css 声明也不起作用
【发布时间】：2020-11-08 19:25:15
【问题描述】：

我试图更好地理解 CSS 的工作原理。我有以下代码：

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;700;900&display=swap" rel="stylesheet');
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: 'Raleway', sans-serif;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
}

.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
}


/* typography
================== */

h1 {
  font-weight: 300;
  font-size: 1.7rem;
  margin-top: 0;
}

p {
  margin-top: 0;
  line-height: 1.5;
}

p:last-of-type {
  margin-bottom: 0;
}

.title {
  font-size: 2.5em;
  margin-top: 1em;
  margin-bottom: 1.5em;
  font-weight: 900;
}

.title span {
  font-weight: 300;
  display: block;
  font-size: .9em;
}

@media(min-width:60rem) {
  p {
    font-size: 1.2rem;
    line-height: 1.6;
  }
  .title {
    font-size: 3.7em;
    margin-bottom: 1em;
    margin-top: 0;
    font-weight: 900;
  }
}


/* buttons */

.button {
  display: inline-block;
  font-size: 1.15em;
  text-decoration: none;
  text-transform: uppercase;
  border-width: 2px;
  border-style: solid;
  padding: .5em 1.75em;
  color: #00ff6c;
  border-color: #00ff6c;
}

@media (min-width: 60rem) {
  .button {
    font-size: 1.5rem;
  }
  .button-small {
    font-size: .7rem;
    font-weight: 700;
  }
  .button-accent {
    color: #00ff6c;
    border-color: #00ff6c;
  }
  .button-accent:hover,
  .button-accent:focus {
    background: #00ff6c;
    color: #232323;
  }
}


/* header
================== */

header {
  position: absolute;
  margin-top: 1em;
  left: 0;
  right: 0;
  margin: 1em;
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
  margin: 1em;
}

nav a {
  font-weight: 900;
  text-decoration: none;
  padding: .5em;
  text-transform: uppercase;
  color: #FFF;
  font-size: .8rem;
}

nav a: hover,
nav a: focus {
  color: #DDD;
}

@media(min-width:60rem) {
  .logo {
    float: left;
  }
  nav {
    float: right;
  }
}


/* home-hero
================== */

.home-hero {
  background-image: url(https://i.postimg.cc/XY54RwQY/hero-bg.jpg);
  background-size: cover;
  background-position: center;
  padding: 10em 0;
  color: #FFF;
}

@media (min-width: 60rem) {
  .home-hero {
    height: 100vh;
    padding-top: 35vh;
  }
}


/* hero-home
======================== */

.home-about-textbox {
  background-color: #232323;
  padding: 4em;
  margin: 0 -2.5vw;
  outline: 2px solid #00ff6c;
  outline-offset: -2.5em;
  color: #FFF;
  position: relative;
}

.home-about-textbox h1 {
  color: #00ff6c;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: .75em;
  background: #232323;
  padding: 0 .145em;
  white-space: nowrap;
}

.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
  background-color: mediumvioletred;
  color: magenta;
}

@media (min-width: 25rem) {
  h1 {
    font-size: 2 rem;
  }
  .home-about-textbox h1 {
    top: .6em;
    padding: 0 .325em;
  }
}

@media (min-width: 60rem) {
  h1 {
    font-size: 2.5rem;
  }
  .home-about {
    background-image: url();
    background-repeat: no-repeat;
    padding-bottom: 10em;
  }
  .home-about-textbox {
    width: 50%;
    padding: 7em;
    outline-offset: -3.75em;
    margin-left: -2.5%;
    top: -5em;
    text-align: left;
    box-shadow: 0 0 4em 0 rgba(0, 0, 0, .3);
  }
  .home-about-textbox h1 {
    top: .75em;
    left: 6rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: .75em;
    background: #232323;
    padding: 0 .145em;
  }
}

.container {
  width: 95%;
  max-width: 70em;
  margin: 0 auto;
  background-color: coral;  
font-weight: 100;
color: blue;
}

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Creative Inc.</title>
  <link rel="stylesheet" href="styles.css" type="text/css">
</head>


<body>

  <header>
    <img src="https://i.postimg.cc/NFtwcdYg/logo.png" alt="Creative inc. logo" class="logo">
    <nav>
      <ul>
        <li><a href="">Home</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
    </nav>
  </header>

  <section class="home-hero">
    <div class="container">
      <h1 class="title">Making things looks great
        <span>for companies who make great stuff</span>
      </h1>
      <a href="" class="button button-accent">See Our Work</a>
    </div>
  </section>


  <div class="container">
    <section class="home-about">

      <div class="home-about-textbox">
        <h1>Who we are</h1>
        <p>Sit by the fire drink water out of the faucet hide head under banket so no one can see cat is love, cat is life.Knock dish off table eating always hungry so favor packaging over toy.</p>
        <p>
          <srong>Rub face on owner.</srong>Peer out window, chatter at birds, lure then to mouth. Chase ball of string eat a plant, kill a hand, i am the best have secret plans.
        </p>
      </div>
    </section>
  </div>
</body>

</html>

这里，home-about-textbox 使用类属性以三种不同的方式定义：

  `<div class="container">
  <section class="home-about"> for pc media
<div class="home-about-textbox">`for mobile media

但容器也选择了“home-hero”部分：<section class="home-hero"> <div class="container">。

我试图弄清楚容器的作用是什么。当我在 css 样式表中选择 .container 时，“home-about-textbox”在浏览器上变为蓝色，因此我尝试更改容器的颜色以查看此类是否真正选择了两个部分（“home- hero”和“home-about-textbox”）看起来如何。

我在代码末尾再次选择了容器，以确保没有其他东西覆盖它（最后一个媒体声明已关闭），我用疯狂的颜色设置样式，但没有任何变化。我什至尝试了 !important 规则，风格是一样的。我的问题是：

这个容器类在代码中究竟选择了什么以及为什么我不能设置它的样式？

【问题讨论】：

标签： css

【解决方案1】：

container 是一个赋予 div 标签以定义网页大小的类，所有其他元素都应在其中，因此它们的父级（容器）将具有所有样式

你用错了!important，你应该这样用：

background-color: red !important;

【讨论】：