是否有可能让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.远射？
谢谢.
Bol*_*ock 83
只需:empty像这样使用伪类:
td.someClass:not(:empty) {
/* Styles */
}
正如Petr Marek所提到的那样,它作为跨浏览器解决方案并不是非常可靠,所以如果你必须支持旧浏览器(IE8及更早版本),你将需要JS(你可以自己弄清楚).否则,上面的CSS规则将正常工作.
你可以找到的浏览器的兼容性:not()和: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-class:empty,则应用CSS.