Html 内容感知CSS-仅当内容可用时应用样式_Html_Css

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

html css

Html 内容感知CSS-仅当内容可用时应用样式,html,css,Html,Css,有没有可能让css样式知道它所应用的元素是否有某种内容？我目前正在使用表格（由于最终用户使用cms来创建页面，所以必须使用表格），每个单元格都有css，也是如此 <table> <tr> <td class="someClass">Test value 1</td> <td class="someClass">Test value 2</td> </tr> <tr> <t

有没有可能让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>


测试值1
测试值2
测试值3

如图所示，表单元格可能为空。有没有办法让“someClass”知道这一点，而不将样式应用于此单元格

我确信我可以应用一些js技巧，但我想知道纯css是否可行。远射

谢谢。

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

只需使用

：empty

伪类，如下所示：

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

正如Petr Marek提到的，作为一个跨浏览器解决方案，它不是非常可靠，因此，如果您必须支持较旧的浏览器（IE8和更旧的），那么您将需要JS（您自己可能会找到）。否则，上面的CSS规则就可以正常工作了

您可以找到

:not（）

和

:empty

的浏览器兼容性。我唯一能想到的与您的问题相关的是psuedo类，例如empty。以下是一个例子：

<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类：empty，则应用CSS。

您想要什么样的样式？您有

空单元格：隐藏将隐藏单元格的边框。谢谢各位：不（：空）对我有效！从技术上讲，这个答案是正确的。然而，不再有很多人使用缺少：而不是的浏览器。