Html CSS样式优先

我有两个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.">

当图像元素被分配两个类时，类

中描述的样式边框半径的规则将生效。较小的图像
将生效，而不是
深绿色边框
类中设置的半径。也就是说，图像的边界半径正在变成30px，而不是10px

谁能告诉我为什么？我已尝试更改将类分配给图像的顺序，但结果是相同的。
这是您想要的吗


。浓密的绿色边框{
边框颜色：绿色；
边框宽度：10px；
边框样式：实心；
边界半径：10px；
显示：内联块；
}
.较小的图像{
宽度：100px；
边界半径：30px；
}
更改CSS中类的顺序


。浓密的绿色边框{
边框颜色：绿色；
边框宽度：10px；
边框样式：实心；
边界半径：10px；
}
.较小的图像{
宽度：100px；
边界半径：30px；
}
.2小号图像2{
宽度：100px；
边界半径：30px；
}
.厚绿色边框2{
边框颜色：绿色；
边框宽度：10px；
边框样式：实心；
边界半径：10px；
}

OP想要覆盖
设置的边框半径。粗绿色边框
，而不是两个边框都有。好吧，我误解了他的意思。我想要“粗绿色边框”类设置的边框@赵说得对。那你为什么不在小一点的图片上去掉边框呢？我理解你的意思。我完全可以做到。但我只是想知道为什么第二节课的边界风格是有效的，而不是第一节课。我完全忘了他们是同一水平的@GabrielChihonglee好吧！两个班级在同一水平上是当时的问题！谢谢杰米·巴克