HTML CSS定位包含类的相邻单元格

时间:2014-11-16 02:44:28

标签: html css

我有一个包含行和单元格的表格,每个卖出内部都是一个无序列表。

这些UL标签中的一些(不是表TD单元格)有一个应用于它们的类,它为ul添加了红色边框,问题是我不想要双边框,因此需要删除左边框来自除第一个细胞之外的所有相邻细胞或移除第一个细胞上的右边界。

在具有ul.class的相邻单元格行中可能会出现几次添加边框,并且其间可能还有其他单元格没有ul类。

这是一个非常复杂的表的简单示例,我省略了结束标记:

<tr>
    <td>
        <ul class="flag">
    <td>
        <ul class="flag">
    <td>
        <ul>
    <td>
        <ul>
    <td>
        <ul class="flag">
    <td>
        <ul class="flag">

我尝试使用相邻标签,但这不起作用:

ul.flag {
    border: 1px 1px 1px 1px
}

ul.flag + ul.flag {
    border: 1px 1px 1px 0
}

如何定位包含特定类标记的相邻单元格?

1 个答案:

答案 0 :(得分:1)

首先设置边框

td ul.flag {
   border: 1px solid red;
}

然后删除除第一个孩子之外的所有孩子的左边界

td:not(:first-child) ul.flag{
   border-left:0;
}