<分区>
<分区>
我有两个 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 类中设置。那就是图片的 border-radius 变成了 30px，而不是 10px。
谁能告诉我为什么？我尝试更改将类分配给图像的顺序，但结果是一样的。
最佳答案
更改 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.">它们都具有相同的层级，因此将应用后者。
关于html - CSS 样式优先级，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38845250/