cssで指定した色にならない

前提

Webサイトの文字の色をcssで指定した色にしたいのですが，別の色になってしまいます。

実現したいこと

表中のボタンの中の文字の色を白に統一したい。
具体的には，以下のボタン
・btn-hos
・btn-hos_kai

※以下のボタンは，中の文字が白になっています。
・btn-ren_y

発生している問題・エラーメッセージ

エラーメッセージ等は出ていません。

該当のソースコード

html
1<td><p class="btn-ren_y"><a href="rennsyuu-sikinotennkaitoinnsuubunnkai-y.pdf" target="_blank" class="btn">練習問題（余白なし）</a></p>
2    <p class="btn-hos"><a href="AL-keisannnokuhuu-1.pdf" target="_blank">【AL教材】計算の工夫</a></p> 
3    <p class="btn-hos_kai"><a href="AL_kai-keisannnokuhuu-1.pdf" target="_blank">【AL教材】計算の工夫（解答）</a></p></td>

css
1.btn {
2  color: #f7fcfe;
3}
4.btn-ren_y {
5  background-color: #4c6cb3;
6  font-size: 16px;
7  font-family: 'Bitter';
8  font-weight: bold;
9  width: auto;
10  display: block;
11  text-align: center;
12  line-height: 30px;
13  margin: 20px 10px;
14  border-radius: 3px;
15  border: 3px solid #4c6cb3;
16}
17.btn-hos {
18  background-color: #c0a2c7;
19  font-size: 16px;
20  color: #f7fcfe !important;
21  font-family: 'Bitter';
22  font-weight: bold;
23  width: auto;
24  display: block;
25  text-align: center;
26  line-height: 30px;
27  margin: 20px 10px;
28  border-radius: 3px;
29  border: 3px solid #c0a2c7;
30}
31.btn-hos_kai {
32  background-color: #f2a0a1;
33  font-size: 16px;
34  font-family: 'Bitter';
35  font-weight: bold;
36  width: auto;
37  display: block;
38  text-align: center;
39  line-height: 30px;
40  margin: 20px 10px;
41  border-radius: 3px;
42  border: 3px solid #f2a0a1;
43}

試したこと

・クロムの検証機能を使う。
・!importantを付ける。
・2行にわたるボタンのクラスを外す。
をやってみましたが，文字が白になりませんでした。

行動規範の内容に同意します

回答1件

ベストアンサー

HTMLを修正する場合

aタグにbtnクラスをつけたらいいのではないでしょうか？
1つめのものにはついています。

html
1    <p class="btn-hos"><a href="AL-keisannnokuhuu-1.pdf" target="_blank" class="btn">【AL教材】計算の工夫</a></p> 
2    <p class="btn-hos_kai"><a href="AL_kai-keisannnokuhuu-1.pdf" target="_blank" class="btn">【AL教材】計算の工夫（解答）</a></p></td>

CSSを修正する場合

htmlを触ってはいけないのでしたら、cssでaタグに白色をつけたらいいです。

css
1.btn-hos a,
2.btn-hos_kai a {
3  color: #f7fcfe;
4}

おそらくなんですけど、提示されているコードだけではなく、他にもCSS書いたり、リセットCSS読み込んでますよね？
そこにaタグの色が指定されているはずです。
ですのでaタグの親要素である.btn-hos .btn-hos_kaiの文字色を白色にしても、その子要素のaタグは別で書かれているCSSが優先されているので白色に変わりません。

投稿2022/12/07 14:53

編集2022/12/07 16:29