Html CSS ::在表格单元格之前

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/6482787/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 09:15:46  来源:igfitidea点击:

CSS ::Before on Table Cell

htmlcsspseudo-element

提问by Adam

I want to add a ::beforeselector on some table cells what has a position:absolute, but it fails:

我想::before在一些带有 的表格单元格上添加一个选择器position:absolute,但它失败了:

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>

I noticed that if I add the ::beforeto all of the tr's then it works:

我注意到,如果我将::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>

But this is not what I want, because I want to add it only on some of them.

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

回答by kapa

I'm not sure why it fails exactly, but you could add it on the first table cell instead.

我不确定为什么它会完全失败,但是您可以将它添加到第一个表格单元格中。

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