Question

是否可以让css样式知道它所应用的元素是否具有某种内容？我目前正在使用表格（强制使用，因为最终用户使用cms创建页面），每个单元格都有一个css，因此

<table>
<tr>
    <td class="someClass">Test value 1</td>
    <td class="someClass">Test value 2</td>
</tr>
<tr>
    <td class="someClass">Test value 3</td>
    <td class="someClass"></td>
</tr>
</table>

如图所示，表格单元格可能留空。有没有办法让“someClass”意识到这一点，而不是将样式应用于这个单元格？

我确信我可以应用一些js hack，但我想知道是否可以使用纯css。远射？

感谢。

Answer 1

只需使用:empty伪类，如下所示：

td.someClass:not(:empty) {
    /* Styles */
}

正如Petr Marek所提到的，它作为跨浏览器解决方案并不十分可靠，所以如果你必须支持旧浏览器（IE8及更早版本），你将需要JS（其中）你可以弄清楚自己）。否则，上面的CSS规则就可以了。

您可以找到:not()和:empty here

的浏览器兼容性

Answer 2

我能想到的唯一与你的问题相关的是假的类，比如空的。这是一个例子：

<html>
  <head>
    <title>Example</title>
    <style type="text/css">
      .cell:not(:empty) {
        background-color: red;    
      }
      .cell:empty {
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <table><tBody>
      <tr><td class="cell"></td><td class="cell">Not empty</td></tr>
      <tr><td class="cell">Not empty</td><td class="cell"></td></tr>
    </tBody></table>
  </body>
</html>

在现代浏览器中，您会看到空单元格为蓝色，内容单元格为红色。这里的关键是CSS的第一行，.cell：not（：empty）。如果元素没有psuedo-class：empty applied。

，则应用CSS

Answer 3

不，使用纯跨浏览器 css则不行。您必须编辑他们的cms或使用javascript。

内容感知CSS - 仅在内容可用时应用样式

3 个答案: