Question

我希望只有在元素之后有其他元素才能使用元素。到目前为止，这是我的代码：

<table id='table_1'>
   <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
 </tr> 
</table>

是否有可能：在A和B之后，但不是C？

我的CSS

#table_1 td:after{
content: "";
background: black;
border: 1px solid black;
position: relative;
margin-left: 10px;
}

Answer 1

最简单的方法是使用not（：last-child）：

#table_1 td:not(:last-child):after{
    content: "";
    background: black;
    border: 1px solid black;
    position: relative;
    margin-left: 10px;
}

<强> Working exmaple

这样，您只有一个选择器，而且您不需要覆盖您的代码。

Answer 2

您可以将:before与+一起用于较旧的浏览器支持

Adjacent sibling selector

#table_1 td {
  position: relative;
}
#table_1 td + td:before {
  content: "";
  position: absolute;
  background: black;
  border: 1px solid black;
  position: relative;
  margin-left: 10px;
  margin-right: 10px;
}

<table id='table_1'>
  <tr>
    <td>A</td>
    <td>B</td>
    <td>C</td>
  </tr>
</table>

Answer 3

您可以使用td:last-child选择任何td元素作为其父元素的最后一个子元素，然后隐藏其:after伪元素：

#table_1 td:last-child:after {
    display:none;
}

演示：

＆＃13;

#table_1 td:after {
    content:"";
    background: black;
    border: 1px solid black;
    position: relative;
    margin-left: 10px;
}
#table_1 td:last-child:after {
    display:none;
}

＆＃13;

<table id='table_1'>
    <tr>
        <td>A</td>
        <td>B</td>
        <td>C</td>
    </tr>
</table>

＆＃13;

Make：仅在元素后面有另一个元素

3 个答案: