【问题标题】：Pseudo class selectors same values伪类选择器相同的值
【发布时间】：2023-04-08 12:04:01
【问题描述】：

我正在为悬停类和活动类使用伪选择器。在这种情况下，悬停和活动的颜色是相同的。这样做的方法是这样的：

a {
  color: #0090B2;
  &:hover {
    color: #FF7A00;
  }
  &.active {
    color: #FF7A00;
  }
}

但我不想重复相同的属性，我正在寻找这样的东西，当然这不起作用，但你明白我想要做什么。正确的方法是如何做到这一点？我应该只使用mixin吗？

a {
  color: #0090B2;
  &:hover, &.active {
    color: #FF7A00;
  }
}

【问题讨论】：

我想要这个结果：a { color: #0090B2; } a:hover { 颜色: #FF7A00; } a.active { 颜色：#FF7A00; }
您是指a:active（而不是a.active）吗？ a.active 不是伪类。无论哪种方式，在 CSS 中，sel1, sel2 { rules } 完全等同于 sel1 { rules } ; sel2 { rules }，所以无论您遇到什么问题，都不是对两个不同的选择器使用一个规则。
您说“[...] 当然这不起作用...”，但它确实有效。该代码的问题在哪里？我不明白，对不起。

标签： css sass pseudo-element

【解决方案1】：

选项 1

我不明白你的方式有什么问题，这对我有用：

a {
  color: #0090B2;
  &:hover, &.active {
    color: #FF7A00;
  }
}

这会给你：

a {
  color: #00acc1;
}
a:hover, a.active {
  color: #0f9d58;
}

选项 2

a {
  color : #00acc1;;

  &:hover {
    @extend %active_link;
  }

  &.active {
    @extend %active_link;
  }
}

%active_link {
  color: #0f9d58;
}

结果与之前相同。但是，在这里您可以执行以下操作：

a {
  color : #00acc1;;

  &:hover {
    @extend %active_link;
    content: "AAA";
  }

  &.active {
    @extend %active_link;
    content: "BBB";
  }
}

%active_link {
  color: #0f9d58;
}

然后得到：

a {
  color: #00acc1;
}
a:hover {
  content: "AAA";
}
a.active {
  content: "BBB";
}

a:hover, a.active {
  color: #0f9d58;
}

【讨论】：