CSS选择器时:目标为空

前端之家收集整理的这篇文章主要介绍了CSS选择器时:目标为空前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
当:target等于元素的id(easy)或者:target为空(不可能?)时,我需要一个css3选择器来定位元素.这很难解释,所以让我举一个简单的例子.
div {
  background: blue;
}
div:target,div:no-target {
  background: red;
}

但当然:no-target伪类不存在;).有没有办法解决这个问题而不使用Javascript?提前致谢!

解决方法

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

仅使用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中接受的答案非常相似.

原文链接:https://www.f2er.com/css/217473.html

猜你在找的CSS相关文章