CSS表格单元格中的::before伪元素

Question

我想在一些具有position: absolute的表格单元格上添加一个::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>

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

- Adam Halasz

---

在我的FF5中它运行良好。也许你需要更清晰地定义“失败”？ - Wesley Murch

@Wesley Murch 我使用了最新版本的Chrome和Firefox 3.6，我又编辑了一下代码片段，因为之前有些地方搞错了，也许你已经看到了，请再检查一遍。 - Adam Halasz

双冒号是CSS3伪元素表示法。但IE浏览器（< 9版本）不支持这种表示法。 - BoltClock

为了更容易区分伪类和伪元素，他们引入了新的符号表示法，但为了与旧的伪元素保持兼容性，单冒号仍然是被允许的。具体信息请参考：http://www.w3.org/TR/css3-selectors/#pseudo-elements。 - BoltClock

@BoltClock - 嗯，这很有趣。不确定为什么我们需要这种风格的内容，但是嘿，我只是坐在便宜的座位上。 :D - Jared Farrish

Answer 1

我不确定为什么会失败，但你可以将它添加到第一个表格单元格中。

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

- kapa

---

我不确定为什么你的代码能够工作，但它确实可以：）我尝试了 table tr .useBefore 但失败了，非常感谢！:) 你的名字在匈牙利听起来像脏话，你是匈牙利人吗？:P ? - Adam Halasz

@CIRK 是的，之前有其他人告诉我，在匈牙利我的名字不好听 :)。 - kapa

我之前也遇到了同样的问题。注意到在tr上使用:before会像在第一个单元格前插入一个新的单元格，并将所有其他单元格向一侧推动。而在td:first-child上使用伪元素可以正常工作。 - Cthulhu

@AdamHalasz 当你写table tr .useBefore时，它意味着一个具有类名.useBefore的tr内部元素。如果你想影响一个既是tr又是.useBefore的元素，则需要输入table tr.useBefore。 - Francisco Zarabozo