CSSの編集について

とあるホームページテンプレート　（HTML　CSS)を使用しているのですが
この度　メニューバーを追加したく　HTMLとCSSの編集をしています。
しかし　CSSは　最後に追加　し　HTMLは必要な個所に追加しましたが
その追加した場所以降の　文字の大きさと字体が変わってしまいます。
HTMLタグ自体には　文字のタグはなく　CSSのほうにあるのですが
最後に記述したのに他にどうして影響するのか　解決ができない状態です。

貼りつけたCSSとHTMLを消すと元には戻るのですが....
形崩れもないですし　是非使用したいのです

ご教授くださいませ。


一番最後に追加したCSS
/*===============================================
burger
================================================= */
.burger {
display: inline-block;
border: 0;
background: none;
outline: 0;
padding: 0;
cursor: pointer;
border-bottom: 4px solid currentColor;
width: 28px;
transition: border-bottom 1s ease-in-out;
-webkit-transition: border-bottom 1s ease-in-out;
}
.burger::-moz-focus-inner {
border: 0;
padding: 0;
}
.burger:before {
content: "";
display: block;
border-bottom: 4px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger:after {
content: "";
display: block;
border-bottom: 4px solid currentColor;
width: 100%;
margin-bottom: 5px;
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}

.burger-check {
display: none;
}

.burger-check:checked ~ .burger {
border-bottom: 4px solid transparent;
transition: border-bottom 0.8s ease-in-out;
-webkit-transition: border-bottom 0.8s ease-in-out;
}
.burger-check:checked ~ .burger:before {
-ms-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transform: rotate(-405deg) translateY(1px) translateX(-3px);
-webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}
.burger-check:checked ~ .burger:after {
-ms-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transform: rotate(405deg) translateY(-4px) translateX(-5px);
-webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
transition: transform 0.5s ease-in-out;
-webkit-transition: -webkit-transform 0.5s ease-in-out;
}

.navigation {
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}

.burger-check:checked ~ .navigation {
max-height: 500px;
-webkit-transition: max-height 0.5s ease-in-out;
transition: max-height 0.5s ease-in-out;
}

body {
background-color: white;
font-family: 'Libre Baskerville', serif;
font-style: italic;
font-size: 30px;
text-align: centeR;
}

a {
color: inherit;
}

small {
font-size: 14px;
}

ul {
margin: 0;
padding: 0;
}

li {
list-style: none;
font-size: 25px;
padding: 5px 0;
}
li a {
text-decoration: none;
}
li a:hover {
text-decoration: underline;
}

No.1 ベストアンサー 回答者： ORUKA1951 回答日時： 2015/09/25 09:03

CSSは、Cascading Style Sheetsの略でカスケードが最大の特徴であることはご存知だと思います。

　順番はそのごく一部、詳細度が同じだとはじめて記述の順番が影響を与えるのですよ。
それ以前に優先度
　ユーザーの重要宣言＞著者の重要宣言＞著者＞ユーザー
詳細度
などがあります。

CSS2.1仕様書
5 セレクタ( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )
6 プロパティ値とカスケーディング、継承の割り当て( http://momdo.s35.xrea.com/web-html-test/spec/CSS … )

HTML4.01仕様書
4.カスケードするスタイルシート( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html4 … )

　えらく複雑で特殊なプロパティも書かれていますが、そんなプロパティより先に身につけないとならないのが、セレクタやカスケーディングの仕組みですよ。
　基本的な運転もできないのにドリフト走行で走っているようなものです。

・元々のスタイルシートのセレクタの記述がまずいため、詳細度が低い
・かき加えたスタイルシートのセレクタの記述がまずくて、適用したい要素以外にも適用されてしまう。

　のいずれかでしょう。

ウェブ開発されているなら、当然開発ツール( https://addons.mozilla.org/ja/firefox/extensions … )の豊富なfirefoxをお使いだと思いますが、firebugやDOM inspectrで確認すると分かるのではないかと・・

この回答へのお礼

カスケードについてとても勉強になりました。
ＨＴＭＬ側の　適用箇所で文字の大きさを設定することで解決しました。
しかしながら　他の作業もあり　上記記載して頂いた内容がとても役に立ちそうです。
ありがとうございました。

お礼日時：2015/09/25 20:21