html - 如何基于 HTML 类重构 CSS

Question

我有两个 CSS。

第一个是这样的:

#breadcrumbs-cool a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ccc #ccc #ccc transparent;
  left: -1em;
}

然后是下一个

#breadcrumbs-cool a.disable::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #eee #eee #eee transparent;
  left: -1em;
}

注意唯一的区别是类指令

a::before 
a.disable::before

和边框颜色:#ccc 与 #eee。 我该如何重构这两个 CSS？

Answer 1

你需要保持原样:

#breadcrumbs-two a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ccc #ccc #ccc transparent;
  left: -1em;
}

然后在 disable 类出现时覆盖你想要指定的部分

#breadcrumbs-two a.disable::before{
  border-color: #eee #eee #eee transparent;
}