[CSS选择器：target空

Question

我需要一个[[css3选择器，当：target等于元素的ID（简单）或:target为空（不可能？）时，将元素作为目标。很难解释，所以让我举一个简单的例子。

div {
  background: blue;
}
div:target, div:no-target {
  background: red;
}

但是当然:no-target伪类不存在;）。有没有不使用
Javascript

的方法？预先感谢！

Answer 1

叹息。我觉得我正在复活一个死气沉沉的话题，但这需要一个真实的答案。

仅通过使用:last-child和general sibling combinator，以:target ~ :last-child的形式，就可以单独使用CSS进行此操作：

.pages > .page:target ~ .page:last-child,
.pages > .page {
    display: none;
}

/* :last-child works, but .page:last-child will not */
.pages > :last-child,
.pages > .page:target {
    display: block;
}

规则适用于以下步骤：
隐藏所有页面
同时显示目标页面和最后一页
如果页面是目标页面，则隐藏最后一页（.page:target ~ .page:last-child）

(live example)

编辑：显然，这与an older, previously mentioned, related post中接受的答案非常相似。

Answer 2

default-target-with-css上的一个很好的答案

它围绕this trick，在iOS中似乎有问题。它已在Safari中修复，所以也许会在iOS 5中修复？

Answer 3

我能想到的是，您有一些JavaScript可以检查哈希是否为空。如果是这样，它将向body标签添加一个名为“ noHash”的类。然后，您可以使用CSS规则中存在noHash类的事实。

if (window.location.hash.length <= 1) {
     document.body.className += " noHash";
}

然后，您的CSS可能像这样：
div {
  background: blue;
}
div:target, body.noHash div {
  background: red;
}

如果在任何情况下用户都可能在事实之后添加哈希值，那么您可能必须注意这一点，以确保正确删除了noHash类。
注意：您不必将类名添加到body标签。您可以将其添加到涵盖您希望影响的所有对象的任何父对象。

Answer 4

为什么不使用div:not(:target)或div:not(:target)？

Answer 5

您可以使用选择器div:target:empty。