隐藏没有javascript的HTML元素，只有CSS

Question

我有一个包含许多元素的HTML文档

<article class=slide id=s4>
<h1></h1>

<p></p>
</article>

我想要做的就是当链接变为www.mylink.com#s4时，只有出现id=s4的文章。而另一个消失了。我知道display:none;属性值，但我不知道如何在没有javascript的情况下切换这个值。

提前致谢...

Answer 1

在（IE＆lt;9∉现代浏览器）中，您可以使用:target伪类：

section {
    display: none;
}
section:target {
    display: block;
}

此伪类与URL片段中引用的元素匹配。

对于非浏览器，您可以使用conditional comment classes来显示所有部分和警告消息：

.lt-ie9 section {
    display: block;
}
.ie-warning {
    display: none;
}
.lt-ie9 .ie-warning {
    display: block;
}

（或只使用Javascript）

Answer 2

您很可能想要使用:target伪类选择器。从css-tricks中查看this page。它还包括一种在没有:target的情况下执行此操作的方法，以便它可以在IE7 +中运行（如果这对您很重要）。

Answer 3

首先需要像这样设置CSS：

article { display:none; }

然后有这个JavaScript：

var id = document.location.hash.replace('#','');

if(document.location.hash != ''){
    document.getElementById(id).style.display = 'block';
}

请记住，没有启用JavaScript的用户根本看不到任何内容！