CSS结构我的代码

Question

是否有这样一种方式来构建css文件?:

a:link {
  color: red;
  font-weight: bold;
  a:hover {
    text-decoration: none;
    font-weight: normal
  }
}

所以我想要一个普通的链接加下划线和粗体，但是当我把鼠标悬停在它上面时，它不应该加下划线和粗体，但它应该有相同的颜色。(这是一个简单的例子，只是为了解释)

编辑:我正在寻找一种没有sass或更少的方法

Answer 1

a {
  color: red;
  font-weight: bold;
}
a:hover {
  text-decoration: none;
  font-weight: normal
}

所有的a元素将是红色和粗体。特别是a:hover元素也将没有文本装饰和字体重量覆盖到normal。您不需要处理"父级和子级"，只需处理元素的更具体的状态。

Answer 2

CSS中没有继承，但是你可以这样做:

a:link, a:hover {
    color: red;
    font-weight: bold;
}
a:hover {
    text-decoration: none;
    font-weight: normal;
}

Answer 3

评论中部分提到了这一点，但我认为它值得单独发布。

你可以使用SASS(或LESS，但我发现前者更容易)来编写代码，然后使用像Koala这样的编译器将其编译成常规的CSS。

这样你的代码就变成:

a:link {
  color: red;
  font-weight: bold;
  &:hover {
    text-decoration: none;
    font-weight: normal
  }
}

它将按预期工作