在常见问题解答中，如何在用户仅使用 CSS 单击活动 q 后设置活动 q 的样式

Question

<ul>
 <li>
  <a href='#q1' class='contentlink'>
  Question One?
  </a>
 </li>
 <li>
  <a href='#q2' class='contentlink'>
  Question Two?
  </a>
 </li>
</ul>

   <h3 id='q1'>
    This is Question One?
    </h3>
    <p>
    This is the answer to question one.
    </p>
    <h3 id='q2'>
    This is Question Two?
    </h3>
    <p>
    This is the answer to question two.
    </p>

在不去jQuery的情况下，我有没有办法使用某种:active CSS来设置问题的样式，例如使选择问题成为不同的颜色？我尝试做：

<h3 id='q3' class='faq'>This is the question?</h3>

然后在我的样式表中：

h3.faq:active {
color: yellow;
}

但它并没有改变问题的颜色。

Answer 1

您正在寻找:target伪类。像这样使用它：

h3:target {
    color: yellow;
}

Answer 2

您要查找的是目标伪类。它的目标是 ID 出现在 URL 中"#"之后的元素。

看看这个小提琴：http://jsfiddle.net/9MXq3/

示例 CSS：

h3:target{
background: #ddd;
}