透明和无边框的 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;
}