優先度

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スタイルの適用時の役割は優先度です.

  • 宣言された場所に基づいて優先度を決定

  • 明ビュー(明ビューの数が少なく、明ビューの数が多い)

  • コードの場所(先に宣言した内容を適用)
  • だから今挙げた例は1番に相当する内容です.
    <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