利用CSS3的checked伪类实现OL的隐藏显示的方法

下面是“利用CSS3的checked伪类实现OL的隐藏显示的方法”的完整攻略。

1. 需求分析

在网页中，我们时常需要对一些内容进行展开和隐藏。比如说，一个FAQ页面上展示了很多问题，我们需要点击问题才能展开答案。而 <ol> 标签本身就会自带序号，如果想要对其中的某些序号进行展开和隐藏，我们可以使用 CSS3 的伪类 :checked 来实现。

2. 实现方法

首先，我们需要用到 label 标签来包裹 input 标签，在 label 的 for 属性中指定对应的 input 的 id。然后，我们再利用 CSS 的 :checked 伪类来控制需要展开的内容的显示和隐藏。

2.1 示例一

HTML代码：

<ol>
  <li>
    <label for="item1"><span>1.</span>问题1</label>
    <input type="checkbox" id="item1"/>
    <p>答案1</p>
  </li>
  <li>
    <label for="item2"><span>2.</span>问题2</label>
    <input type="checkbox" id="item2"/>
    <p>答案2</p>
  </li>
</ol>

CSS代码：

ol li p {
  display: none;
}

input[type=checkbox]:checked + p {
  display: block;
}

首先，我们设置 ol 列表中的 p 标签为隐藏状态，然后使用 CSS3 的选择器，控制选中的 checkbox 的相邻兄弟元素 p 的显示状态，达到点击问题后展开答案的效果。

2.2 示例二

如果我们想要使用动画效果来实现展开和隐藏，可以借助 CSS3 的过渡效果来实现：

HTML代码：

<ol>
  <li>
    <label for="item1"><span>1.</span>问题1</label>
    <input type="checkbox" id="item1"/>
    <p>答案1</p>
  </li>
  <li>
    <label for="item2"><span>2.</span>问题2</label>
    <input type="checkbox" id="item2"/>
    <p>答案2</p>
  </li>
</ol>

CSS代码：

ol li p {
  height: 0;
  overflow: hidden;
  transition: height 0.5s;
}

input[type=checkbox]:checked + p {
  height: auto;
}

首先，我们设置展开的内容 p 的高度为 0，并隐藏溢出部分。同时，我们设置过渡效果，当高度发生变化时，过渡效果的时间为 0.5s。然后使用 CSS3 的选择器，控制选中的 checkbox 的相邻兄弟元素 p 的高度为 auto，就可以实现展开的效果，同时由于过渡效果的存在，高度变化时也会产生动画效果。

3. 结束语

以上就是利用 CSS3 的 checked 伪类实现 OL 的隐藏显示的方法。通过使用 label 和 input 标签配合 CSS 的 :checked 伪类以及过渡效果，我们可以实现多种多样的所见即所得的隐藏显示效果。