css - 某个类的右边没有左边框

Question

有没有什么方法可以用 CSS 指定禁用某个类单元格右侧的左边框？

正如您在这张图片中看到的那样，右侧的边框是双边框，它具有“已选择”类的边框加上默认的灰色边框。我希望“选定”单元格的右边框以某种方式覆盖相邻单元格的左边框。

FWIW，我认为这是因为表格的 CSS，我在其中评论了“border-collapse”。我需要这样做，否则我不能在 table 上有圆 Angular 。

.ui-tabs-panel td {   /*  default table cell */
    border-bottom: 1px solid #E9EBDF;
    border-left: 1px solid #E9EBDF;
    padding: 7px 7px;
    font-family: Tahoma;
    cursor: default;
    background-color: #FAFDFF;
}

.ui-tabs-panel td.selected {  /* when selected */
    border-right: 1px solid #94DFEB !important;
    border-left: 1px double #94DFEB !important;

    background-color: #FFF !important;
    color: #087DBD;
}

Answer 1

看来，当前的额外边框属于下一个<td>元素，试试这个来清除边框:

.ui-tabs-panel td.selected + td {
    border-left: none;
}

可以通过 Adjacent sibling combinator选择下一个兄弟元素

element1 + element2选择每个 element2紧跟在 element1 之后的元素元素。他们是 sibling 。