我正在尝试隐藏一个在自动生成的HTML文档中的元素：
<p id="sitspagedesc" class="sitspagedesc">
</p>
<p> 标签会包含一个内部值，但在其他情况下，它可能仅包含空格，如示例所示。我需要找到一种使用CSS隐藏它的方法，因为更改HTML不是选项。.sitspagedesc:empty
{
display:none;
}
但是这样不起作用，可能是因为该元素包含了空格。
有人有什么好的想法吗？
谢谢 :)
我认为你不能只用纯CSS来做到这一点。
不过，使用一点JavaScript是可以做到的。
var allParas = document.getElementsByTagName('p');
//filter by class name if desired...
for(var i=0;i<allParas.length;i++){
if(allParas[i].getElementsByTagName('*').length == 0){
allParas[i].style.display = 'none';
}
}
$('p.sitspagedesc').each(function(){
if($(this).children().length == 0){
$(this).hide();
}
});
:empty选择器的功能，但忽略空格，则scunliffe提供的被接受的答案不太适用。它只检查子元素，这并没有考虑所选元素内直接包含的文本。例如，<p>Hello World!</p>将被视为空，因为它没有子元素，即使它确实包含非空格文本。$('p.sitspagedesc').each(function(){
if($.trim($(this).text()) == '' && $(this).children().length == 0){
$(this).hide();
}
});
https://drafts.csswg.org/selectors-4/#the-blank-pseudo
对于 Mozilla 浏览器而言，已经有一个带前缀的实现 :-moz-only-whitespace，用于处理空白符。
:empty选择器非常严格，含有空格的元素不被视为空。因此有两个解决方案：
:empty选择器是CSS3选择器，尚未由IE8及以下版本支持，因此在这些浏览器中使用JavaScript回退可能是一个好主意，除非您可以修复服务器端脚本，使空元素在渲染期间根本不呈现，或在渲染过程中赋予您的特殊类，因此不需要JavaScript。$('*:only-child:empty').each(
function(index) {
var currentElement = $(this);
// skip singleton tags
if(/^(?:area|br|col|embed|hr|img|input|link|meta|param)$/i.test(currentElement.get(0).tagName) == true) {
return
}
// skip empty tags but which are valid
if(/^(?:textarea)$/i.test(currentElement.get(0).tagName) == true) {
return
}
while (currentElement.parent().children().length == 1) {
currentElement = currentElement.parent();
}
// so 0 or more children for the parent then we hide it
// we will never have more then 0 children though the :empty takes care of that
console.log('hidding: ' + currentElement);
currentElement.hide()
}
);
虽然不是标准，但 Firefox 支持 ":-moz-only-whitespace"。
此外，为了一些“未来证明”，css-tricks 提到了一个 :blank 选择器，它将成为 CSS 选择器 Level 4 草案的一部分。虽然目前没有浏览器支持它，但这是一种可能性。
目前纯CSS中无法检测空元素。如果不能使用JavaScript，那么在HTML到达浏览器之前，有没有任何服务器端操作的方法？
CSS：
.sitspagedesc:empty
{
display:none;
}
jQuery：
$('.sitspagedesc').html(function(){
// empty element
return $.trim($(this).html());
});
你可以使用：
p.sitspagedesc {
content: " ";
display: none;
}
除非您在其中随机有多个空格...
content将被完全忽略，因为它只是::before和::after伪元素上的有效属性。这将简单地隐藏所有.sitspacedesc的实例，包括那些具有内容的实例。 - Ansel Santosa
p？我建议在服务器端放置一些逻辑，如果你不想显示它，则不要渲染此元素。你试图实现的似乎是违反直觉的。 - Curtis<p>标签吗？还是你想通过ID处理这个特定的元素？ - scunliffe