css - 在样式中引用类

Question

我有一个作为 anchor 实现的自定义按钮。该按钮有图像和文本。

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

这是按钮代码:

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