cssスタイルの上書き順序

7331 ワード

0.スタイル位置分類
1)外部cssファイルの使用

<link href="/static/css/main.css" rel="stylesheet">

2)headのstyle要素の使用

<head>
<style type="text/css">
    .main{color:red;}
</style>
</head>

3)要素上のstyleの使用

<body style="color:red;"></body>

1.スタイルオーバーライドの全体原則:
要素のstyle>ファイルヘッダのstyle要素>外部スタイルファイル
異なるレベルのスタイルが同じ要素をレンダリングする場合、競合するスタイルでは、要素上のstyleを優先してファイルヘッダ上のstyle要素を上書きします.衝突しないスタイルの場合は、スタイルの重ね合わせが行われます.
例:

<head>
<style type="text/css">
    .main{color:red;background-color:yellow;}
</style>
</head>
<body id="mainbody" class="main" style="color:green;"></body>

body要素の場合、要素styleとファイルヘッダのstyleがヒットします.この場合、backgroud-colorスタイルが重なり、colorスタイルが競合し、body要素のスタイルが優先されます.レンダリング結果:

color:green;
background-color:yellow;

2.同レベルのスタイルファイルの下:
1)スタイルシートの要素選択が正確であればあるほど、スタイルの優先度が高くなります.
idセレクタ指定スタイル>クラスセレクタ指定スタイル>要素タイプセレクタ指定スタイル
例では、cssがレンダリングされると、#mainbody>.main>body

2)同じタイプのセレクタによって作成されたスタイルでは、スタイルシートファイルの優先度が高いほど優先度が高くなります.
ここでは、要素classが表示される順序ではなく、スタイルシートファイルの後になるほど優先度が高くなります.

たとえば、.class 2はスタイルシートに.class 1の後に表示されます.

.class1{
    color:red;
}
.class2{
    color:green;
}

について

<div class="class2 class1">
<div class="class1 class2">

class 1は要素の中でclass 2の後ろにタイミングを指すが、スタイルシートファイルの中でclass 1がclass 2の前にあるため、この場合もclass 2の優先度が高いため、color:greenを採用する

3)あるスタイルの優先度を高くするには、使用します.important

<head>
<style type="text/css">
    .main{color:red !important; background-color:yellow;}
</style>
</head>
<body id="mainbody" class="main" style="color:green;"></body>

ヘッドのスタイルで使用しました!important、レンダリング時にcolor:redを使用

Bitriseを使ったライブラリの自動定期更新で楽に開発

Javaキーストア-詳細