Q&A
質問とhtmlがあってないようです
アルファベットのボタンを作っています。
それぞれ alpha-btn という色をもっており画像のように緑いろになります。そこで alpha-btn というクラス名をたもったまま、 B ボタンの色だけを赤に変えたいと思い red-btn というクラスを付けたのですが色が変わりません。
どうしたら変わりますか？
#html <a data-method="post" href="/search?q=a"> <li class="alpha-btn">A</li> </a> <a data-method="post" href="/search?q=a"> <li class="alpha-btn green-color">A</li> </a>
//css li.alpha-btn{ width: 50px; background-color: #1abc9c; display: inline-block; text-align: center; margin-bottom: 20px; line-height: 50px; box-shadow: 0 3px 0 #0e8c73; text-shadow: 0 1px 1px rgba(0, 0, 0, .3); } .alpha-btn:hover { background-color: #31c8aa; box-shadow: 0 3px 0 #23a188; } .alpha-btn:active { top: 3px; box-shadow: none; } .red-btn{ background-color: red }
回答2件
0
ベストアンサー
以下の2つを修正すると質問者さんの実現したいことができると思います。
0. li要素はa要素の子要素として認められていない。
0. li.alpha-btnと.red-btnではセレクタの優先順位が異なる。
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 a { 13 text-decoration: none; 14 color: #000000; 15 } 16 17 li.alpha-btn { 18 width: 50px; 19 background-color: #1abc9c; 20 display: inline-block; 21 text-align: center; 22 margin-bottom: 20px; 23 line-height: 50px; 24 box-shadow: 0 3px 0 #0e8c73; 25 text-shadow: 0 1px 1px rgba(0, 0, 0, .3); 26 } 27 28 li.red-btn { 29 background-color: red 30 } 31 32 .alpha-btn:hover { 33 background-color: #31c8aa; 34 box-shadow: 0 3px 0 #23a188; 35 } 36 37 .alpha-btn:active { 38 top: 3px; 39 box-shadow: none; 40 } 41 </style> 42</head> 43<body> 44<ul> 45 <li class="alpha-btn"><a data-method="post" href="/search?q=a">A</a></li> 46 <li class="alpha-btn red-btn"><a data-method="post" href="/search?q=a">A</a></li> 47</ul> 48</body> 49</html>
投稿2017/04/06 03:13
編集2017/04/06 03:49
総合スコア14731
あっ！できました。
特に li.alpha-btnと.red-btnではセレクタの優先順位が異なる。
は知らなかったのでありがたいです。
ありがとうございました！
0
html
1<li class="alpha-btn green-color">A</li>
これを。。。
html
1<li class="alpha-btn red-btn">B</li>
こうじゃ！！！
css確認する時はキャッシュクリアも試してみてね。
キーボードの Ctrl + F5 同時押しでページ更新すればいける
投稿2017/04/06 03:38
総合スコア39
横から失礼します。
red-btnクラスとalpha-btnクラスの優先順位(http://creator.aainc.co.jp/archives/4947)が違うので、CSSのセレクタも変更しないと質問者さんの実現したいことは行えないと思いますが、いかがでしょう？
あなたの回答
tips
プレビュー
