CSS类订单显示不同的结果

时间:2017-08-25 13:35:10

标签: html css css3

如果我在bb类css代码之前移动代码,intro-block类背景颜色将为红色,但是如果我将其放在intro-block类css代码之后,则颜色不是改变,没有任何反应! 有人能告诉我为什么会这样吗?!

.left-column {
  width: 35%;
  margin-left: 20px;
  margin-right: 50px;
  float: left;
  overflow: hidden;
}

.right-column {
  overflow: hidden;
}

.intro-block {
  background-color: #22AAA1;
  margin: 0 auto;
  /*max-width: 950px;*/}
}

.bb {
  background-color: red;
}
<body>
  <header>
    <section class="intro-block">
      <div class="left-column">
        <img class="profile-pic right-column" src="img/11.jpg">
      </div>
      <div class="right-column">
        <h1>lorem ipsum</h1>
        <p>
          <h4>lorem ipsum</h4>
        </p>
      </div>
    </section>
  </header>
  <main>
    <section class="bb">
      <h3>lorem ipsum</h3>
      <div class="left-column">
        <div>
          <p>lorem ipsum</p>
        </div>
      </div>
      <div class="right-column">
        <h5>lorem ipsum</h5>
      </div>

2 个答案:

答案 0 :(得分:5)

"private": true, "dependencies": { "@angular/animations": "^4.0.0", "@angular/common": "^4.0.0", "@angular/compiler": "^4.0.0", "@angular/core": "^4.0.0", "@angular/forms": "^4.0.0", "@angular/http": "^4.0.0", "@angular/platform-browser": "^4.0.0", "@angular/platform-browser-dynamic": "^4.0.0", "@angular/router": "^4.0.0", "bootstrap": "^3.3.7", "core-js": "^2.4.1", "font-awesome": "^4.7.0", "jquery": "^3.2.1", "rxjs": "^5.4.1", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.2.5", "@angular/compiler-cli": "^4.0.0", "@angular/language-service": "^4.0.0", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.0.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.0.4", "tslint": "~5.3.2", "typescript": "~2.3.3" }

之前还有一个额外的}

注意:请勿在{{1​​}}

中打包标题(.bb {}h1

你应该缩进/整理你的代码以便更好地阅读,并且你会很容易发现这个错误

h6
p

答案 1 :(得分:0)

  

/ max-width:950px; / }

你引用的行后面有一个额外的},它与以下规则混淆了......