css - CSS 链接嵌套样式

Question

我需要创建很多链接样式：

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

但对于 a.1 - a.10

有什么办法可以将代码切割成更紧凑的变体？

谢谢。

标签： css

Answer 1

你不能用简单的 CSS 来做到这一点，你可以使用 SASS 来做你想做的事。

这是关于嵌套的 SASS 文档！

您将能够创建类似的东西：

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

如果你的类需要多种样式，你仍然可以嵌套你的样式a，它仍然更容易阅读和更快地编写：

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