css - 引用样式中的类

Question

我有一个自定义按钮实现为锚。该按钮具有图像和文本。

当按钮有焦点时，我想以不同的方式设置它。具体来说，我想在图像和文本周围画一个虚线矩形。我还想根据另一个类另外设置它的样式。

这是按钮代码：

<a id="searchButton" class="button" href="#">
    <span class="icon-search"></span>
    Search
</a>   

这是我的问题的CSS代码：

button:focus {
/*How do I make a rectangular dotted line around the button text and icon? /*
/* How do I refer to another class that has additional stylings? */
}

Answer 1

您有“按钮”，但它应该是“.button”，因为您的标签不是按钮，而是您的类。

.button:focus {
  outline: #00FF00 dotted thick;
}

关于这个问题，“我如何引用另一个有额外样式的类？”，我相信你需要一个像 SASS、LESS 或其他动态样式表语言这样的库，因为 CSS 目前不支持这种类型的功能。 .

Answer 2

您可以通过在一个类前面加上一个点 ( .) 来引用它，如下所示：

.button { /* styles go here */ }

您可以使用outline: 1px dotted gray;

.button:focus {
     outline: 1px dotted gray;
}