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 类中描述的样式border-radius 的规则生效，而不是thick-green-border 类中设置的半径。那就是图片的边框半径变成了 30px，而不是 10px。

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

Answer 1

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

它们都具有相同的层次结构级别，因此将应用后者。

Answer 2

这是你想要的吗？

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