2017-08-25 3 views
2

Die bb Klasse Hintergrundfarbe wäre rot, wenn ich den Code vor der intro-block Klasse css Codes verschieben, aber wenn ich es nach intro-block Klasse Css-Codes setzen die Farbe ändert sich nicht und nichts passiert! Kann mir jemand sagen, warum das passiert ?!CSS-Klasse Aufträge zeigt unterschiedliche Ergebnisse

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

Antwort

5

Sie haben eine extra } kurz vor .bb {}

Hinweis: nicht Schriften wickeln (h1-h6) in p

sollten Sie/ordentlich einrücken Ihr Code zum besseren Lesen und damit finden Sie diesen Fehler leicht y

.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> 
 
     <h4>lorem ipsum</h4> 
 
     </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> 
 
     </section> 
 
    </main>

0

/max-width: 950px;/}

Sie haben eine extra} nach der zitierte Zeile, die mit den folgenden Regeln vermasselt ...

Verwandte Themen