請參閱樣式中的類

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庫，少用或其他一些動態樣式表語言，因爲這類型的功能本地不支持CSS。

Answer 2

你指一類由以點（.），像這樣的前綴它：

.button { /* styles go here */ } 

可以實現與

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