2016-08-09 25 views
0

Ich habe zwei CSS-Klassen:CSS Styling Vorrang

.thick-green-border { 
border-color: green; 
border-width: 10px; 
border-style: solid; 
border-radius:10px; 
} 

.smaller-image { 
width: 100px; 
border-radius:30px; 
} 

Verwendung in HTML-Dokument:

<img class="thick-green-border smaller-image" src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on its back."> 

Wenn das Bildelement zugeordnet ist, sowohl die Klassen, die Regel für den Stil border-radius beschrieben in der Klasse .smaller-image wird wirksam, nicht der Radius innerhalb thick-green-border Klasse festgelegt. Das ist der Rand-Radius des Bildes wird 30px, nicht 10px.

Kann mir bitte jemand sagen warum? Ich habe versucht, die Reihenfolge zu ändern, in der die Klassen dem Bild zugewiesen sind, aber das Ergebnis ist das gleiche.

Antwort

-1

Ist das was du willst?

.thick-green-border { 
 
border-color: green; 
 
border-width: 10px; 
 
border-style: solid; 
 
border-radius:10px; 
 
display: inline-block; 
 
} 
 

 
.smaller-image { 
 
width: 100px; 
 
border-radius:30px; 
 
}
<div class="thick-green-border"> 
 
<img class="smaller-image" src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on its back."> 
 
    </div>

+0

OP möchte den mit '.thick-green-border' festgelegten Grenzradius überschreiben, um nicht beide Ränder zu haben. – cHao

+0

gut, ich missverstanden, was er –

+0

Ich möchte die Grenze von "Dick-grün-Grenze" -Klasse festgelegt. @CHao hat das richtig gemacht. –

0

Ändern Sie die Reihenfolge der Klassen in der CSS.

.thick-green-border { 
 
    border-color: green; 
 
    border-width: 10px; 
 
    border-style: solid; 
 
    border-radius: 10px; 
 
} 
 
.smaller-image { 
 
    width: 100px; 
 
    border-radius: 30px; 
 
} 
 
.smaller-image2 { 
 
    width: 100px; 
 
    border-radius: 30px; 
 
} 
 
.thick-green-border2 { 
 
    border-color: green; 
 
    border-width: 10px; 
 
    border-style: solid; 
 
    border-radius: 10px; 
 
}
<img class="thick-green-border smaller-image" src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on its back."> 
 

 
<img class="thick-green-border2 smaller-image2" src="https://s3.amazonaws.com/freecodecamp/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">

Beide haben die gleiche Hierarchiestufe, so dass die letztere angewendet.

+0

Okay! Beide Klassen waren auf dem gleichen Niveau wie damals! Danke @ Jamie-Barker –