是否可以链接到具有不同 CSS 条件的同一页面，具体取决于我单击的链接？

Question

我有三个不同的链接，它们都指向同一个页面。 但我需要使用不同的 CSS 设置加载页面（取决于单击的链接，某些元素应隐藏在新页面上）。

那可能吗？ 谢谢！

Answer 1

当然，您可以使用:target伪类来执行此操作。

来自MDN ：

:target CSS 伪类表示一个唯一元素（目标元素），其 id 与 URL 的片段匹配。

使用target ，您单击一个链接，例如page.html#some-condition ，然后在您的CSS中侦听该条件。 当id与地址栏中的 hash 匹配时，您就有了匹配，并且达到了目标。

<a href="#some-condition">A link</a>
<div id="some-condition"></div>

#some-condition:target {
  /* style appropriately */
}

这是一个快速演示。 在这种情况下，链接包含id ，但如上所示，您可以根据需要构建内容。

 #red:target ~.result { background-color: red; } #blue:target ~.result { background-color: blue; } #green:target ~.result { background-color: green; }.result { width: 100px; height: 100px; display: inline-block; border: 1px solid; background-color: #fff; transition: 0.3s background-color; }

 <a id="red" href="#red">Red</a> <a id="blue" href="#blue">Blue</a> <a id="green" href="#green">Green</a> <div class="result"></div>

jsFiddle