:target 为空时的 CSS 选择器

时间:2022-10-19
本文介绍了:target 为空时的 CSS 选择器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

问题描述

我需要一个 css3 选择器来定位一个元素,当 :target 等于元素的 id(简单)或当 :target 为空(不可能?).很难解释,我举个简单的例子.

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 有没有办法解决这个问题?提前致谢!

But of course the :no-target pseudo class doesn’t exist ;). Is there a way around this without using Javascript? Thanks in advance!

推荐答案

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

Sigh. I feel like I'm resurrecting a dead topic, but it needs a real answer.

仅使用 CSS 就可以做到这一点,只需使用 :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 .page:last-child will not */
.pages > :last-child,
.pages > .page:target {
    display: block;
}

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

The rules applies in the following steps:

  1. 隐藏所有页面
  2. 同时显示目标页面和最后一页
  3. 如果一个页面被定位,隐藏最后一页(.page:target ~ .page:last-child)

(现场示例)

显然,这与 旧版本中接受的答案非常相似,前面提到的相关帖子.

这篇关于:target 为空时的 CSS 选择器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

上一条:CSS 直接后代 (>) 在选择性方面没有任何价值吗? 下一条:CSS 中的 * 和 *|* 有什么区别?

相关文章

最新文章