隐藏没有javascript的HTML元素，只有CSS [英] Hide HTML elements without javascript, only CSS

问题描述

我有一个包含许多元素的html文档，例如

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

所有我想做的是当链接变成 www.mylink.com ＃s4 ，则只会显示包含 id = s4 的文章。和另一个dissapear。我知道 display：none; 属性值，但我不知道如何切换这个值没有javascript。

提前感谢...

解决方案

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

 节{
 display：none; 
} 
 section：target {
 display：block; 
} 
  

此伪类匹配URL片段中引用的元素。 / p>

对于非浏览器，您可以使用条件注释类以显示所有部分和一条警告消息：

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

（或只使用Javascript）

I have an html document with many elements like this

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

<p></p>
</article>

All I want to do is when the link becomes www.mylink.com#s4 then only the article with id=s4 to be appeared. And the other to dissapear. I know about the display:none; property-value but I dont know how to switch this value without javascript.

Thanks in advance...

解决方案

In (IE < 9 ∉ modern browsers), you can use the :target pseudo-class:

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

This pseudo-class matches the element that is referenced in the URL fragment.

For non-browsers, you can use conditional comment classes to show all of the sections and a warning message:

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

(or just use Javascript)

这篇关于隐藏没有javascript的HTML元素，只有CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！