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 for some reason .page:last-child will not */
.pages > :last-child,
.pages > .page:target {
    display: block;
}

(live example)

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

Answer 2

default-target-with-css

有一个很好的答案

它围绕着似乎在iOS中存在问题的this trick。它已在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？

Answer 5

您可以使用选择器:not(:target)。

CSS选择器时：目标为空

5 个答案: