:target 为空时的 CSS 选择器

Question

当 :target 等于元素的 id（简单）或 :target 为空（不可能？）时，我需要一个 css3 选择器来定位元素。很难解释，我举个简单的例子。

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

当然，:no-target 伪类不存在 ;)。不使用 Javascript 有没有办法解决这个问题？提前致谢！

Answer 1

叹息。我觉得我正在复活一个死去的话题，但它需要一个真正的答案。

仅使用 CSS 就可以做到这一点，只需使用 :last-child 和 general sibling combinator，形式为 :target ~ :last-child：

.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;
}

这些规则适用于以下步骤：

1. 隐藏所有页面
2. 同时显示目标页面和最后一页
3. 如果某个页面被定位，则隐藏最后一页 (.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:target:empty？