css tag 多的显示隐藏

CSS标签多的显示与隐藏是Web前端开发中常见的需求之一。下面我们来介绍一些实现方式。

1. 使用display属性

<style>
.hidden {
  display: none;
}
</style>

<div>我是一段默认显示的文字</div>
<div class="hidden">我是一段隐藏的文字</div>

通过使用display:none;可以实现隐藏元素，将CSS样式设置为.hidden后，可以批量隐藏或显示元素。

2. 使用visibility属性

<style>
.hidden {
  visibility: hidden;
}
</style>

<div>我是一段默认显示的文字</div>
<div class="hidden">我是一段隐藏的文字</div>

visibility:hidden;同样可以实现元素的隐藏，但元素在页面中仍会占据空间。与display:none;不同的是，元素的visibility值可以通过JavaScript来修改。

3. 使用opacity属性

<style>
.hidden {
  opacity: 0;
}
</style>

<div>我是一段默认显示的文字</div>
<div class="hidden">我是一段隐藏的文字</div>

opacity:0;将元素完全透明，即看不到元素。与visibility:hidden;不同的是，元素在页面中仍会占据空间，且元素的opacity值可以通过JavaScript来修改。

以上就是三种常见的CSS标签多的显示与隐藏实现方式。根据需求选择合适的方式即可。