CSS 鏈接嵌套 styles

Question

我需要創建很多鏈接styles：

  a:link {color: one;}
  a:visited {color: two;}
  a:hover {color: three;}
  a:active {color: four;}

但對於 a.1 - a.10

有什么辦法可以將代碼切割成更緊湊的變體？

謝謝。

Answer 1

你不能用簡單的 CSS 做到這一點，你可以使用 SASS 來做你想做的事。

這是關於嵌套的 SASS 文檔！

您將能夠創建類似的東西：

.my-class-1 a, .my-class-2 a {
  :link {
    color: one;        
  }
  :visited {
    color: two;
  } 
  [...]     
}

如果您的 class 需要多種樣式，您仍然可以像這樣嵌套您a ，它仍然更容易閱讀和更快地編寫：

 .my-class-1 a {
  :link {
    color: one;        
  }
  :visited {
    color: two;
  } 
  [...]     
}
.my-class-2 a {
  :link {
    color: three;        
  }
  :visited {
    color: four;
  } 
  [...]     
}