css - 设置表格中选定区域的边缘答案

【问题标题】：css - style the edge of the selected area in tablecss - 设置表格中选定区域的边缘
【发布时间】：2011-11-29 00:56:38
【问题描述】：

我有一个可选表（jQuery UI 可选）。我如何“访问”边缘（上、左、右、下）宽度 css，还是必须使用 javascript？

更新： 使用“访问边缘”我的意思是例如在表格中的选定区域周围创建一个边框（选择 td 元素，在 tr 中首先选择 .ui-selected，最后选择 .ui-selected在 tr 中，第一个 tr 包含 .ui-selected，最后一个 tr 包含 .ui-selected）。

<table class="ui-selectable">
    <tr>
        <td class="ui-selectee"></td>
        <td class="ui-selectee"></td>
        <td class="ui-selectee"></td>
        <td class="ui-selectee"></td>
    </tr>
    <tr>
        <td class="ui-selectee"></td>
        <td class="ui-selectee ui-selected"></td>
        <td class="ui-selectee ui-selected"></td>
        <td class="ui-selectee"></td>
    </tr>
    <tr>
        <td class="ui-selectee"></td>
        <td class="ui-selectee ui-selected"></td>
        <td class="ui-selectee ui-selected"></td>
        <td class="ui-selectee"></td>
    </tr>
    <tr>
        <td class="ui-selectee"></td>
        <td class="ui-selectee"></td>
        <td class="ui-selectee"></td>
        <td class="ui-selectee"></td>
    </tr>
</table>

例如：左边缘

.ui-selected {
    border-left: 1px solid #00F;
}
.ui-selected ~ .ui-selected {
    border-left: none;
}

【问题讨论】：

您能否详细说明“访问边缘”？

标签： css html-table css-selectors pseudo-class

【解决方案1】：

左：

td:first-child

对：

td:last-child

顶部：

tr:first-child td

底部：

tr:last-child td

编辑： 随着您的更新，我现在可以声明在 CSS3 中没有办法做到这一点。但是 CSS4 的 :nth-match 和 :nth-last-match（在撰写本文时尚未在任何地方实现，规范只是一个工作草案）将能够做到。

【讨论】：