CSSで謎の現象

お世話になっております。
ワードプレスのcocoonテーマでWEBサイトを作成しています。
テーマのデフォルトではヘッダーロゴが中央寄せになっています。
ヘッダーロゴを左寄せにしたかったので以下のコードを追加CSSに記述して左寄せにしていました。

/*ヘッダーロゴ左寄せ*/
.logo{
text-align:left;
}

しかし、1ヶ月くらい経過してからやはり中央寄せが良いと思い、上記を削除しました。
ところが、ヘッダーロゴは左寄せのまま戻らないんです。

四苦八苦していたところ、ある発見をしました。
削除する前の元々の記述があった位置に「.」を記述すると中央寄せになるんです。
この「.」はもともとあった場所に記述しないとダメなんです。
違う位置に記述しても左寄せのままです。

「.」を記述しなくても中央寄せに戻したいのです。
「.」だけというのは気持ち悪いので。

この現象がわかる方、解決できる方がいましたらお願いいたします。

No.1 ベストアンサー 回答者： Ogre7077 回答日時： 2023/09/12 10:52

ブラウザーの開発者ツールを使い、原因を追究しましょう

https://developer.mozilla.org/ja/docs/Learn/Comm …

CSS を以下の状態にして表示した際に
* 追加CSSに記述して左寄せ
* 上記を削除しました...戻らない
* 「.」を記述すると中央寄せ

ヘッダーロゴの要素に適用されている CSS ルールを調べて、
適用されている text-align が何処で定義されているのかを探しましょう

推測1)
こことは無関係な箇所にある別ルールが誤って適用されている
対策としては、より詳細度の高いルールで上書きする
https://developer.mozilla.org/ja/docs/Web/CSS/Sp …

推測2)
「.」が前後の行にある別ルールと文法上で繋がった
別ルールが文法不正により無効化され、今回の原因が適用されなくなった

この回答へのお礼

ご回答ありがとうございました。
大変参考になりました。

お礼日時：2023/09/12 12:09