：目标伪类没有找到目标

Question

我想使用：target伪类更改我的html元素的样式。 我的标记 （第一个是按钮，第二个是目标元素）：

<a id="btn01" href="#theTarget"><span class="adtb-orange"><span>Call to action</span></span></a>

<div id="theTarget" class="col-lg-6">target</div>

css：

#btn01:target {
  background-color: #ff0000;
}

这不起作用，我不明白为什么。任何人都可以帮助我吗？ 谢谢。

Answer 1

:target不起作用。来自MDN：

  

:target伪类表示唯一元素（如果有）   一个id匹配文档URI的片段标识符。

简而言之，您的CSS中应该只有一个:target规则，当点击一个锚时会自动应用该规则：

:target { outline: solid red }  /* draw a red, solid line around the target element */

jsFiddle Demo

Answer 2

将您的css类替换为：

#theTarget:target {
  background-color: #ff0000;
}