CSS стиль старшинство

Question

У меня есть два CSS класса:

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

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

Использование в HTML-документе:

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

Когда элемент изображения присвоенные как классы, правило для стиля границы радиуса, описанный в классе .smaller-image, вступает в силу, а не радиус, установленный внутри класса thick-green-border. Это граничный радиус изображения становится 30px, а не 10px.

Может ли кто-нибудь рассказать мне, почему? Я попытался изменить порядок, в котором классы назначаются изображению, но результат тот же.

Answer 1

Это то, что вы хотите?

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

Answer 2

Изменить порядок классов в 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.">

Они оба имеют один и тот же уровень иерархии, так что последний из них будет применяться.