Q&A
とても詳細なご回答いただきありがとうございます！
ご回答をもとにress.min.cssのことを調べていたところ、
リセットcssは自分のcssよりも先に記述する必要があるというルールを知らず、
リセットcssを後に書いていたのが原因でした！
何時間も格闘していましたが解決してうれしいです、ありがとうございました！
模写コーディングに取り組んでいます。
今メッセージの送信画面の部分を作成しているのですが、
送信ボタンの色が変わりません。
<input>にclassをつけ、classにcssを指定して文字を変えようとしたのですが、
この方法は間違っているのでしょうか？
googleの検証ツールで確認したところ、ボタンのcssの文字色の部分が打ち消されていました。
優先順位の関係なのかよくわかりません。
詳しい方いらっしゃいましたら教えてください、よろしくお願いいたします。
自分で作成したもの
(html) <div id="contact"> <h2>Contact</h2> <form action="#" method="post"> <dl class="contact-form"> <dt class="c-t"><label for="name">Name</label></dt> <dd class="c-d"><input type="text" id="name" name="your-name" ></dd> <dt class="c-t"><label for="email">E-mail</label></dt> <dd class="c-d"><input type="text" id="email" name="your-email"></dd> <dt class="c-t"><label for="message">MESSAGE</label></dt> <dd class="c-d"><textarea id="message" name="your-message"></textarea></dd> </dl> <div class="submit-button"><input class="s-submit" type="submit" value="送信"></div> </form> </div> (css) .s-submit { width: 200px; background-color: #24292e; color: #fff; padding: 15px 0; border: solid 1px #24292e; }
サイトの解答
(html) <section id="contact" class="wrapper"> <h2 class="sec-title">Contact</h2> <form action="#" method="post"> <dl> <dt><label for="name">NAME</label></dt> <dd><input type="text" id="name" name="your-name"></dd> <dt><label for="email">E-mail</label></dt> <dd><input type="email" id="email" name="your-email"></dd> <dt><label for="message">MESSAGE</label></dt> <dd><textarea id="message" name="your-message"></textarea></dd> </dl> <div class="button"><input type="submit" value="送信"></div> </form> </section> (css) #contact .button input { width: 200px; background-color: #24292e; color: #fff; padding: 15px 0; border: solid 1px #24292e; }
回答4件
0
検証ツールをみるとress.min.cssの[type=submit]セレクタのcolor: inherit;が有効になっていることが分かりますね。
[type=submit]セレクタと.s-submitセレクタの詳細度は同じです。
CSSは同じ詳細度の場合、あとのCSSが優先されます。
ということで、
リセットCSSress.min.cssがメインのCSSstyle.cssより後で読み込まれいるのではないでしょうか。
リセットCSSは一番最初に読み込むようにしましょう。
そうしないと、他の部分でも同じようなことが発生します。
投稿2021/10/14 05:28
編集2021/10/14 05:31
総合スコア33795
0
ベストアンサー
開発者ツールでのCSSプロパティの取り消し線の意味は、より優先度の高いルールセットによって上書きされたということです。「スタイル」タブの上の方のルールが優先度が高いです。画面からは、ress.min.css の [type=submit] というセレクタのルールで color プロパティが上書きされているんだとわかります。
ress.min.css を使うのをやめるか、.s-submit のセレクタ詳細度を上げるか、colorプロパティを上書き禁止にするとよいでしょう。
例: セレクタを [type=submit].s-submit にする、color: #fff !important にする、など。
投稿2021/10/14 05:10
総合スコア21012
0
投稿2021/10/14 05:10
総合スコア36163
ご回答いただきありがとうございます！
!importantの使い方勉強させていただきました、感謝です＾＾
今回はリセットcssを自分で作成したcssよりも後にリンク指定していたのが問題でした。
ご協力いただきありがとうございました！(^_^)
0
普通に背景色も文字色も指定の通り適用されているようです
以下内容のみコピペで作成したhtmlでもだめですか ？
CSS
1<style> 2.s-submit { 3 width: 200px; 4 background-color: #24292e; 5 color: #fff; 6 padding: 15px 0; 7 border: solid 1px #24292e; 8} 9</style> 10<div id="contact"> 11<h2>Contact</h2> 12<form action="#" method="post"> 13<dl class="contact-form"> 14<dt class="c-t"><label for="name">Name</label></dt> 15<dd class="c-d"><input type="text" id="name" name="your-name" ></dd> 16<dt class="c-t"><label for="email">E-mail</label></dt> 17<dd class="c-d"><input type="text" id="email" name="your-email"></dd> 18<dt class="c-t"><label for="message">MESSAGE</label></dt> 19<dd class="c-d"><textarea id="message" name="your-message"></textarea></dd> 20</dl> 21<div class="submit-button"><input class="s-submit" type="submit" value="送信"></div> 22</form> 23</div>
投稿2021/10/14 04:59
編集2021/10/14 05:16
総合スコア115012
回答いただきありがとうございます！
「送信」の文字色を白にしたいのですが、
自分の記述だとcssにwhiteを指定しても打ち消されてしまい、
色のように白ではなくもともとbodyで指定していた文字色になってしまうんです。（１枚目の画像）
この理由ってわかりますか？
ご丁寧にありがとうございます！
上に回答していただいた方法で試してみても変わらなかったのですが、
理由がわかりました！
リセットcssを自分で作成したcssよりも後にリンク指定していたのが問題でした。
ご協力いただきありがとうございました！(^_^)
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/14 05:35