CSSの読み込み順序について

CSSの背景が映らない問題

背景をいくら変えても反映されない

 

〜原因〜

読み込み順序を考慮していなかったから

〜〜〜〜〜〜〜〜〜

 

例　

A.css

.exa{

background-color: #ffffff;

}

B.css

.exa{

background-color: #000000;

}

 

exa.html

<link rel="stylesheet" href="A.css">
<link rel="stylesheet" href="B.css">

 

html内で２つのファイルを読み込む

複数箇所で同じセレクタのスタイルを指定すると、同じプロパティに異なる値が指定されてスタイルが競合することも起こりえる。 こうした場合には、よりタグに近いところで指定されたスタイルや、 より後から読み込まれたスタイルが優先されて、プロパティの値が上書きされる。

 

A.css内の背景を変えても後から読み込まれたB.css内のファイルが上書きしてしまったため、背景は変わらなかった。