是否可以鏈接到具有不同 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