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

问题描述

我试图更好地理解 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使用 class 属性以三种不同的方式定义：

  `<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">.

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

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

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

标签： css

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

问题描述

解决方案

推荐阅读