[解決済み] <button> background image

Question

I have got a little problem with setting a background image for <button> .

Here is the html I have got on site:

 <button id="rock" onClick="choose(1)">Rock</button>

And here is the CSS:

button {
   font-size: 18px;
   border: 2px solid #AD235E;
   border-radius: 100px;
   width: 150px;
   height: 150px;
}

button #rock {
   background: url(img/rock.png) no-repeat;
}

I don't know why the button's background is still white.

How to solved?

Astonishing that no answer addresses or mentions the actual problem here.

The CSS selector button #rock says "give me an element with the id rock 内部 a <button> 要素" のようなものです。

<button>
    <span id="rock">This element is going to be affected.</span>
</button>

しかし、あなたが欲しかったのは <button> 要素 と そのID rock . そして、そのためのセレクタは次のようになります。 button#rock (の間にスペースがないことに注意してください）。 ボタン と #ロック ).

また、@Gregが既に述べているように #rock はすでにボタンをターゲットとするのに十分なほど具体的であり、それ自体で使用することができます。