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小提琴：link

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

谢谢！

Answer 1

首先放置标记，并在引用相同元素时删除空格。

如果你正在写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;
}

Answer 2

选择器中的空格是后代组合子。这意味着＆＃34;匹配右侧的选择器，如果它是左侧匹配的东西的后代＆＃34;。

该链接不是其自己的父母或祖父母。

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

button.hello, 
a.hello {

Answer 3

你犯了几个错误：

.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。

Answer 4

＆＃13;

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

＆＃13;

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

＆＃13;

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

4 个答案: