CSS透明和无边框的特异性

Question

我正在为具有底部边框的连续框的页面设置样式，除了最后一个框。我为所有方框应用了课程.box，并添加了.box_last以隐藏最后一个方框的边框。

.box {
  border-bottom-style: solid;
}

.box_last {
  border-bottom-style: transparent;
}

但是，我意识到浏览器仍在应用我的.box样式。但是当我将.box_last从transparent更改为none时，浏览器覆盖了第一个样式，边框消失了。

我搜索了一些CSS特异性文章，但还没有得到答案。有人能为我解释一下吗？谢谢你的进步。

Answer 1

border-bottom-style: transparent;无效的原因是因为transparent是一种颜色，而不是一种风格。这应该可以正常工作：

.box_last {
  border-bottom-color: transparent;
}

或者没有额外的课程：

.box:last-child {
  border-bottom-color: transparent;
}