1

只是想看看我想出的这个想法是否有一个纯 CSS3 解决方案。

基本上，如果用户导航到http://example.com，我想在我的页面上显示一个元素，比如<section id="main" />。但是，如果访问http://example.com/#pics，我想展示一个照片库。

我知道这可以用 JQuery 完成，但我正在尝试用 CSS3 做尽可能多的事情，这只是一个实验性网站，所以浏览器支持不是优先事项，但我对后备很感兴趣。

4

3 回答 3

3

此答案假定您正在选择具有“hideme”类的元素。根据您的情况进行调整。

任何类型的“如果不是”都可以用:not()伪类来完成。在这种情况下：

.hideme:not(:target) {display: none;}

但是，浏览器对此的支持非常低，因此您应该这样做：

selector {do something}
selector:target {cancel the something}

现在，这有点棘手，display因为不同的元素有不同的默认值，但它visibility是您的一个选项：

.hideme {visibility: hidden;}
.hideme:target {visibility: visible;}

或者或另外，您可能能够使用position:absolute和position:static从文档流中删除所选项目。

于 2012-04-25T02:25:37.033 回答
0

查看 :target 选择器和 :not 选择器

你可以做一些事情

div:not(:target){
  display:none
}

#main:target {
   display:block;
}

#pics:target {
    display:block;
}

参考：
http ://www.w3.org/TR/selectors/第 6.6.7 节是 :not 选择器（他们的文件中没有目标）

和

http://www.w3.org/TR/selectors/#target-pseudo

于 2012-04-25T02:25:17.713 回答
0

您可以将代码包装在多个容器中，这样您就可以使用目标伪类来选择您需要的每个元素。

例子

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100" version="1.1">
<style>

/* hide elements by default */
.hide {
  display: none;
}
/* show the elements by target */
#one:target .one,
#two:target .two {
display: block;
}

/* BONUS: using this technique, you can select other elements */
#one:target .default,
#two:target .default {
display: none;
}

/* some colors... */
.one {
fill: red;
}
.two {
fill: yellow;
}


</style>
<g id="one">
<g id="two">
   <rect width="200" height="100" stroke="black" stroke-width="2" fill="green"/>
      <circle class="hide one" cx="50" cy="50" r="20"></circle>
      <circle class="hide two" cx="100" cy="50" r="20"></circle>
      <circle class="default" cx="150" cy="50" r="20"></circle>
</g>
</g>

</svg>

也许这不是一个优雅的解决方案，但它确实有效。

于 2019-08-22T07:25:44.463 回答