html – CSS ::之前在Table Cell上

发布时间：2020-12-14 18:32:17 所属栏目：资源来源：网络整理

导读：我想在一些表格单元格上添加一个:: before选择器,它有一个位置：绝对,但它失败了： table{ border:1px solid #ccc; padding:10px; }table td{ border:1px solid #ccc; padding:5px; }.useBefore::before{ content:'before'; position:absolute;} table tbody

我想在一些表格单元格上添加一个:: before选择器,它有一个位置：绝对,但它失败了：

table{ border:1px solid #ccc; padding:10px; }
table td{ border:1px solid #ccc; padding:5px; }

.useBefore::before{
  content:'before';
  position:absolute;
}

<table>
       <tbody>
         <tr>
           <td>bird</td>
           <td>animal</td>
           <td>nature</td>
        </tr>
        <tr class='useBefore'>
           <td>building</td>
           <td>robot</td>
           <td>city</td>
        </tr>
      </tbody>
  </table>

我注意到如果我将:: before添加到所有tr中,那么它可以工作：

table{ 
    border:1px solid #ccc; 
    padding:10px;
  }
  table td{
    border:1px solid #ccc;
    padding:5px;
  }
  
  tr::before{
    content:'before';
    position:absolute;
  }

<table>
    <tbody>
      <tr>
        <td>bird</td>
        <td>animal</td>
        <td>nature</td>
      </tr>
      <tr class='useBefore'>
        <td>building</td>
        <td>robot</td>
        <td>city</td>
      </tr>
    </tbody>
  </table>

但这不是我想要的,因为我只想在其中一些上添加它.

解决方法

我不确定它为什么会完全失败,但你可以将其添加到第一个表格单元格上.

.useBefore td:first-child:before{
    content:'before';
    position:absolute;
  }

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!