html - CSS 表格矩阵上的边框样式，没有额外的类

Question

我正在仅使用 CSS 制作类似表格的布局。将所有单元格设置为 float:left 后，容器 .matrix 的宽度足以水平放置 4 个单元格。

<div class="matrix">
    <!-- first row -->
    <div class="cell">Cell contents</div>
    <div class="cell">Cell contents</div>
    <div class="cell">Cell contents</div>
    <div class="cell right">Cell contents</div>
    <!-- last row -->
    <div class="cell last">Cell contents</div>
    <div class="cell last">Cell contents</div>
    <div class="cell last">Cell contents</div>
    <div class="cell last right">Cell contents</div>
</div>

为了控制应用边框样式的位置，我使用 .last 和 .right 类来省略边缘的边框样式:

.cell {
    border-bottom:1px solid red;
    border-right:1px solid red;
}
.right {
    border-right:none;
}
.last {
    border-bottom:none;
}

我想知道是否有人有一种技术可以实现相同的结果/逻辑——但不需要额外的类。

感谢您的协助!

Answer 1

有一种方法，但是它使用了一些旧浏览器无法理解的选择器。您的解决方案是最安全的，因此也是最常见的。

CSS3 中有很多新的选择器，其中一些可以解决您的问题。这是一个有趣的列表 useful selectors