0

選択可能なテーブルがあります (jQuery UI 選択可能)。エッジ (上、左、右、下) 幅 css に「アクセス」するにはどうすればよいですか、または JavaScript を使用する必要がありますか?

更新：「エッジにアクセスする」とは、たとえば、テーブル内の選択された領域の周りに境界線を作成することを意味します（td要素を選択し、最初に.ui-selected in tr、最後に.ui-selected in tr、最初に.ui-selectedを含むtr 、.ui-selected を含む最後の tr)。

<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;
}
4

1 に答える 1

0

左：

td:first-child

右：

td:last-child

上：

tr:first-child td

下：

tr:last-child td

編集：あなたのアップデートで、CSS3でそれを行う方法がないことを述べることができます。ただし、CSS4:nth-matchと:nth-last-match（執筆時点ではどこにも実装されておらず、仕様は作業中のドラフトにすぎません）はそれを実行できます。

于 2011-10-01T13:24:57.770 に答える