Question

在第一列或最后一列使用rowspan / colspan的表上是否有关于css选择器行为的工作单？我想在单元格之间设置细边框，并在表格周围设置粗边框。以下示例已简化，设置表格的边框不适用于应用我的样式表的更复杂的对象。

问题是css选择器是否可以对渲染表边界进行操作，而不是表dom层次结构。

<style>
table {
    border-collapse: collapse;
}
td {
    border:1px solid black;
}
tr > td:first-child {
    border-left: 5px solid black;
}
tr > td:last-child {
    border-right: 5px solid black;
}
tr:first-child > td {
    border-top: 5px solid black;
}
tr:last-child > td {
    border-bottom: 5px solid black;
}
</style>
<table>
    <tr>
        <td>A</td>
        <td rowspan=2>B</td>
    </tr>
    <tr>
        <td>C</td>
    </tr>
</table>

Answer 1

摆脱单元格上的额外边框，然后将其应用到整个表格中。

<style>
   table {
      border-collapse: collapse;
      border:5px solid black;
   }
   td {
      border:1px solid black;
   }
</style>

Answer 2

按要求回答你的问题，不;子选择器将始终应用于子项中，因为它们出现在HTML中。

话虽如此，你可以通过混合一些colspan / rowspan attribute selectors以及negation＆amp;来实现你想要做的事情。必要时only-child伪类，但根据最终表的复杂性，编写和维护可能会变得非常复杂。

在此实例中获得所需结果的一种更简单的方法是使用表格border-spacing property：

将该财产的值设为1px。
为整个表格提供一个{1}像素，该像素比您希望的显示范围窄1个像素（考虑border）。
设置表格的border-spacing以匹配其background-color。
重置表格单元格的border-color。

background-color

table{
    background:#000;
    border:4px solid #000;
    border-spacing:1px;
}
td{
    background:#fff;
    padding:5px;
}

css选择器可以在渲染表边界上进行操作，而不是表dom层次结构吗？

2 个答案: