将 CSS 类选择器添加到多个 HTML 元素答案

【问题标题】：Adding CSS class selector to multiple HTML elements将 CSS 类选择器添加到多个 HTML 元素
【发布时间】：2016-09-19 16:20:06
【问题描述】：

这是一个非常简单的问题，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 小提琴：link

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

谢谢！

【问题讨论】：

background-color: #47564;是一个无效的颜色代码，因此不会有任何效果（应该有6个字符，而不是5个）
这是 SASS 或 SCSS 或其他东西，实际上不是直接的 CSS。您需要添加该标签。
正确。多么糟糕的错误！非常感谢大家。

标签： html css sass css-selectors

【解决方案1】：

你犯的几个错误：

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

正确的 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。

【讨论】：

【解决方案2】：

先放置标签，引用相同元素时删除空格。

如果你写的是 scss，那么：

button.hello, a.hello {
    border:none;
    background-color: #475644;

    &:focus{
        outline: red solid 5px;
    }
}

如果你写的是纯 CSS：

button.hello, a.hello {
    border:none;
    background-color: #475644;
}

button.hello:focus, a.hello:focus{
    outline: red solid 5px;
}

【讨论】：

【解决方案3】：

选择器中的空格是后代组合子。这意味着“如果它是左侧匹配的某物的后代，则匹配右侧的选择器”。

链接不是它自己的父或祖父。

删除空格。当你这样做时，类型选择器必须是选择器的第一部分（因为它没有用特殊字符区分）。

button.hello, 
a.hello {

【讨论】：

【解决方案4】：

.hello {
  border:none;
  background-color: #e7e7e7;
  color: #333
}
.hello:hover {
  outline: red solid 5px !important;
}
a {
  text-decoration: none;
  }

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

【讨论】：