Question

我该怎么做？例如，如果我想匹配除空<p>之外的所有<span>标记？如果不修改DOM或使用JavaScript，这可能吗？

Answer 1

这是不可能的。为什么？有一个:empty选择器，其工作方式如下例所示：

<div>
    <p></p>
    <p> blah </p>
    <p> blah 2 </p> 
</div>

div > p:empty {
    background:red;
}

- ＆GT;第一个p将具有红色背景。

但你要找的是这样的

div < p:empty {}

这将是某种父选择器。目前，遗憾的是无法实现这一目标。

之前有一个:contains选择器

div:contains(p:empty) {}

但现在已弃用。

Answer 2

以下是使用JS的一种方式的演示：http://codepen.io/pageaffairs/pen/ELkJa

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

.empty {background: #e7e7e7; height: 30px;}
.empty::before {content: "Paragraph with empty span!";}

</style>
</head>
<body>

<p><span>Span 1</span></p>
<p><span>Span 2</span></p>
<p><span></span></p>
<p><span>Span 4</span></p>


<script>
(function() {
    var span = document.querySelectorAll('span');
    for (var i = 0, ii = span.length; i < ii; i++) {
        var para = span[i].parentNode;
        var paraClasses = para.classList;
        if (!span[i].innerHTML) {
            paraClasses.add('empty');
        }
    }
}());
</script>
</body>
</html>

如上所述，CSS中没有可用的父选择器，即使提出了一个，但即使这样也只能在JavaScript的支持下工作。

CSS：匹配元素，它只包含一个空元素

2 个答案: