html - 将 CSS 类选择器添加到多个 HTML 元素

Question

这是一个非常简单的问题，已经在 Stack overflow 上被问过。一些时间。但看起来，即使我尝试了这种方法，这些答案也没有帮助我。根据我的说法，它应该有效，但事实并非如此。我不确定我在这里犯了什么愚蠢的错误。请看一下。

.hello button, .hello a {
  border: none;
  background-color: #47564;
  &: focus {
    outline: red solid 5px;
  }
}

<div>
  <a class="hello" href="www.google.com">BlahBlah</a>
  <button class="hello">Hello</button>
</div>

这是 JS fiddle :link

我正在尝试使用 hello 类用我的样式覆盖两个元素 a 和 button 的轮廓。但是当我将焦点放在这些元素上时，我仍然会看到默认浏览器的焦点，即通过在 Chrome 中检查它来显示轮廓样式。我无法覆盖它。我不明白问题是因为我使用选择器的方式还是我的焦点风格。

谢谢!

Answer 1

你犯的几个错误:

1. .hello button, .hello a 而不是 button.hello, a.hello
2. 将 SCSS 代码作为 CSS 代码运行
3. 颜色名称少了一个数字

正确的 SCSS 代码应该是这样的:

button.hello, a.hello {
  border:none;
  background-color: #F47564;
  &:focus {
    outline: red solid 5px !important;
  }
}

这将被转换为以下 CSS:

button.hello, a.hello {
  border: none;
  background-color: #F47564;
}
button.hello:focus, a.hello:focus {
  outline: red solid 5px !important;
}

另见 this Fiddle .