CSS元素可见性
CSS 中的 visibility 属性用来设置元素是否可见，您可以将该属性与 JavaScript
一起使用，来创建非常复杂的菜单或网页布局，比如在网页中做一些测试题时您可以使用 visibility 属性将题目的答案或解析隐藏起来，需要时再将其展示出来。
visibility 属性的可选值如下：
| 值 | 描述 |
|---|---|
| visible | 默认值，表示元素是可见的 |
| hidden | 隐藏元素 |
| collapse | 主要用来隐藏表格的行和列，隐藏的行或列所占的空间可以被其他表格内容使用；如果在其他元素上使用，其效果等同于“hidden” |
| inherit | 从父元素继承 visibility 属性的值 |
提示：visibility 属性虽然会隐藏元素，但会保留元素在页面中所占的空间。如果您希望元素隐藏的同时又不占用页面空间的话，请使用 display 属性。
【示例】使用 visibility 属性来隐藏页面中的指定元素：
<!DOCTYPE html>
<html>
<head>
<style>
.visible {
visibility: visible;
}
.hidden {
visibility: hidden;
}
.collapse {
visibility: collapse;
}
table {
border-collapse: collapse;
}
</style>
</head>
<body>
<h1 class="visible">visible</h1>
<h1 class="hidden">hidden</h1>
<table border="1">
<tr><th>值</th><th>描述</th></tr>
<tr><td>visible</td><td class="collapse">默认值，表示元素是可见的</td></tr>
<tr><td>hidden</td><td>隐藏元素</td></tr>
<tr class="collapse"><td>collapse</td><td>主要用来隐藏表格的行和列，隐藏的行或列所占的空间可以被其他表格内容使用；如果在其他元素上使用，其效果等同于“hidden”</td></tr>
<tr><td>inherit</td><td>从父元素继承 visibility 属性的值</td></tr>
</table>
<p><strong>提示：</strong>visibility 属性虽然会隐藏元素，但会保留元素在页面中所占的空间。如果您希望元素隐藏的同时又不占用页面空间的话，请使用 display 属性。</p>
</body>
</html>
运行结果如下图所示：
图：visibility 属性演示
注意：对于隐藏的元素，虽然我们在页面中看不到了，但是源代码中仍然包含这些隐藏的内容，因此您尽量不要使用它来隐藏敏感信息，例如用户信息、密码等等。
原文地址CSS元素可见性CSS 中的计数器类似于变量，可以实现简单的计数功能，并将结果显示在页面上，在早期的网站上应用比较广泛。要实现计数器需要用到以下几个属性：
- counter-reset：创建或者重置计数器；
- counter-increment：递增变量；
- content：插入生成的内容；
- counter() 或 counters()：将计数器的值添加到元素。
下面我们就来看一下 CSS 中的计数器是如何使用的。
初始化计数器
要使用计数器首先需要使用 counter-reset 属性来创建一个计数器，这一过程便叫做初始化计数器。counter-reset 属性的语法格式如下：
counter-reset：none | [ ]
参数说明如下：
- none：阻止计数器复位；
- ：定义计数器的名称；
- ：定义计数器的起始值，默认值为 0，可以为负值。
计数器自增
初始化计数器后，可以通过 counter-increment 属性来指定计数器何时自增，语法格式如下：
counter-increment：none | [ ]
参数说明如下：
- none：阻止计数器增加；
- ：定义要自增的计数器名称；
- ：定义计数器每次增加的数值，默认值为 1，可以为负值。
显示计数器
最后，就是如何显示计数器了。要显示计数器您可以使用 counter() 或 counters() 函数，这两个函数的语法格式如下：
counter(name)
counters(name, string, list-style-type)
参数说明如下：
- name：计数器的名称；
- string：当计数器嵌套使用时，用来拼接的字符串；
- list-style-type：计数器显示的风格，可以是 CSS 中允许的任何《list-style-type 属性》的值。
下面通过一个简单的示例来演示计数器的使用：
<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: chapter;
}
h5, h6 {
margin: 5px 0 5px;
}
h5 {
counter-reset: section;
counter-increment: chapter;
}
h6 {
counter-increment: section;
}
h5:before {
content: "Chapter " counter(chapter) ". ";
}
h6:before {
content: counter(chapter) "." counter(section) " ";
}
</style>
</head>
<body>
<h5>程序设计语言</h5>
<h6>HTML and CSS</h6>
<h6>JavaScript</h6>
<h6>PHP</h6>
<h6>Java</h6>
<h5>数据库管理系统</h5>
<h6>MySQL</h6>
<h6>MariaDB</h6>
<h6>PostgreSQL</h6>
<h6>Oracle</h6>
</body>
</html>
运行结果如下图所示：
图：计数器
注意：在使用 CSS 计数器之前，必须使用 counter-reset 创建计数器。
计数器嵌套
另外，计数器还可以嵌套使用，而且使用 counters() 函数可以在不同级别的嵌套计数器之间插入一个字符串，如下例所示：
<!DOCTYPE html>
<html>
<head>
<style>
ol {
/* 为每个ol元素创建新的计数器实例 */
counter-reset: ol-list;
list-style-type: none;
}
li:before {
/* 只增加计数器的当前实例 */
counter-increment: ol-list;
/* 为所有计数器实例增加以“.”分隔的值 */
content: counters(ol-list, ".") "、";
}
</style>
</head>
<body>
<ol>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
</ol>
</li>
<li>item
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</li>
</ol>
</li>
<li>item</li>
<li>item</li>
</ol>
</body>
</html>
运行结果如下图所示：
图：计数器嵌套
通过以上示例我们不难看出，使用 CSS 计数器可以在不借助其它编程语言（例如 JavaScript、PHP
等）的情况下实现简单的计数功能，当需要为某些内容添加序号时非常适用。
原文地址CSS计数器