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 的规则生效，而不是{{1}中设置的半径}类。也就是说，图像的边界半径变为30px，而不是10px。

任何人都可以告诉我为什么？我已经尝试更改为图像分配类的顺序，但结果是相同的。

Answer 1

更改CSS中类的顺序。

＆＃13;

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

＆＃13;

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

＆＃13;

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

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>

CSS样式优先级

2 个答案: