將CSS屬性選擇器設置為：target

Question

不知道這是否可能。

嘗試動態地將屬性選擇器設置為當前目標（不使用任何JavaScript）。

像這樣的CSS：

.tab[href=#:target] {
  // styles here for active anchor tag
}

html（使用Jade語法）為：

.tab-group
  a.tab(href="#tabA") Tab A
  a.tab(href="#tabB") Tab B
  a.tab(href="#tabC") Tab C

#tabA.target
.tab-content
  h2 Tab A
#tabB.target
.tab-content
  h2 Tab B
#tabC.target
.tab-content
  h2 Tab C

換句話說：如何選擇設置當前主題標簽的錨鏈接（使用純CSS，不使用JS）。

為什么？ 對於僅使用CSS的選項卡，使用:target偽選擇器方法可實現最靈活的html結構。

Answer 1

此處與URL中的片段標識符相關的元素類型有兩種：一種是URL指向的錨元素（一種與URL中的哈希值具有相同ID的元素），另一種是指向該元素的鏈接。與當前網址相同的網址。

：target選擇錨元素。 為了選擇鏈接，您將必須使用Javascript獲取URL，然后使用某種選擇器，例如$ =＃YOURHASH（以結尾）

如果您事先知道這些標簽，則可以創建如下CSS規則：

.tabSomething .content a[href$=#Something] {
  // style for the links that lead to tab Something, because you know the hash is #Something for that tab
}