CSSが反映されない

Question

CSSの優先順位に関して質問でございます。

只今、サイトのCSSをクロームの開発ツール（F１２で起動できるもの）で確認しつつ、
修正しているのですが、ローカルで修正し、本番に反映すると下記の画像のように表示されてしまい反映されません。

こちらネットで調べたところ、
CSSの優先順位が違う？？
とのことがたくさん記載されておりました。

この優先順位が違う場合はどのように対応すればこのようなエラーがでないのでしょうか

また、他に反映されない場合にチェックすべき点があれば、
ご教示頂けますと幸いです。

お時間頂き、恐縮ですが、
何卒宜しくお願い致します。

Answer 1

この優先順位が違う場合はどのように対応すればこのようなエラーがでないのでしょうか

基本的には、より優先度の高いセレクタで上書きをする という対応になります。
ただ、画像を見る限り#addentryというidセレクタで指定されたスタイルがどこで上書きされてしまっているのか分かりません。
また、本来idセレクタというのはかなり優先度の高いセレクタであるため、現状これが上書きされてしまっているということは、それを更に優先度の高いセレクタで上書きする、ということが物理的に困難であることも予想されます。
場合によってはセレクタとスタイルの設定の仕方を抜本的に見なおして、一部再編成しなおす必要があるかもしれません。

どちらにせよ、まずはどこで上書きされてしまっているのか特定しましょう。
どこにも該当のセレクタが無いのであれば、他の構文エラー等が無いかどうかも見たほうが良いかもしれません。

Comments

[growthposition]

結構な修正が必要そうということですね。。
ありがとうございます

ちょっと方法を考えます！

Answer 2

スタイルの指定は、.cssファイルにおける記述位置や、セレクタの詳細度合いによって優先度が計算され、適用されたり打ち消されたりします。

基本的な考え方としては、

• ファイルの後ろに記述されているもの
• セレクタが詳細であるもの(IDやクラスを多く使用しているなど)

ほど、優先して適用されるようになります。

Comments

[growthposition]

ありがとうございます！

Answer 3

http://dotinstall.com/lessons/basic_css_v3/31708
上の動画で、CSSの優先順位を紹介しているので何かの参考になるかと思います！