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;
}

请参阅样式中的类

2 个答案: