CSS选择器当：目标为空 [英] CSS selector when :target empty

问题描述

当：target等于元素的ID（easy）或：target 时，我需要一个 css3 是空的（不可能？）。这很难解释，所以让我给你一个简单的例子。

I need a css3 selector to target an element when the :target equals the id of the element (easy) or when the :target is empty (impossible?). It’s hard to explain, so let me give you a simple example.

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

当然，：no-target 伪类不存在;）。有没有办法使用 Javascript ？先谢谢！

推荐答案

叹息。

只要使用：last-child 和一般同胞组合器 ，以：target〜：last-child 的形式：

It's possible to do this with CSS alone, just by using :last-child and a general sibling combinator, in the form of :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;
}

（实例）

编辑：显然，这与较旧的，先前提到的相关文章。

这篇关于CSS选择器当：目标为空的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！