優先度
9494 ワード
<div id="box">BOX</div>
#box {
color:blue
}
もちろんそうです
but....
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../assets/css/style3.css">
<title>CSS</title>
<style>
#box{
color:red;
}
</style>
</head>
このように頭にスタイルラベルを挿入すると、こんな赤い箱が出てきたでもまた.
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#box{
color:red;
}
</style>
<link rel="stylesheet" href="../assets/css/style3.css">
<title>CSS</title>
</head>
真ん中ならリンクラベルより上なら一番下のスタイル3cssは指定した青いフォントになります.どうしてこんなことになったの?cssスタイルの適用時の役割は優先度です.
宣言された場所に基づいて優先度を決定
明ビュー(明ビューの数が少なく、明ビューの数が多い)
コードの場所(先に宣言した内容を適用)
<div id="box" style="color: blue;">BOX</div>
인라인에 스타일
#box {
color:red;
}
id값
.box{
color:aqua;
}
class값
上には3種類の値段があります.図示図は、前述のように適用範囲が小さいほど、
適用優先順位の明示度が高いほど、適用優先順位が適用される.
したがって、図面を明示する主なタスクは、行にスタイルを適用することです.
このような優先順位式図があります.参考にすればいい
!important (가장 쎄다.)
Inline style > ID > class/attribute/pseudo class> Type(tag) > *(universe selector)>inherited
Reference
この問題について(優先度), 我々は、より多くの情報をここで見つけました https://velog.io/@yangth/우선순위テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol