css3の3つの主要な特徴-研究ノート12

記事のディレクトリ

1.スタッカビリティ

同じセレクターが同じスタイルを設定すると、一方のスタイルが他方の競合するスタイルを上書きします。

原則：
競合がある場合、どのスタイルが構造に近いか、どのスタイルが実行されるか：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
     
     
        color: black;
    }

    div {
     
     
        color: red;
    }
</style>
<body>
    <div>
        你好
    </div>
</body>
</html>

ここに画像の説明を挿入

2.継承

2.1。通常の継承

子タグは、テキストフォントや色番号など、親タグの特定のスタイル（text-、font-、line-これらのスタイルと色を継承できます）を継承します。

<style>
    div {
     
     
        color: red;
    }
</style>
<body>
    <div>
        <p>你好</p>
    </div>
</body>

ここでは、divのフォントが赤に設定され、最後にpのフォントも赤になります。

2.2特殊：行の高さの継承

実際の開発では、行の高さは次のように記述されることがよくあります（スラッシュの後の数字はpxではなくなりました）。

font：12px/1.5 "微软雅黑"

この1.5は、現在の要素のテキストサイズの1.5倍です。

次のコードに対応する行の高さは30px * 1.5 = 45pxです

style>
    body {
        font: 20px/1.5 "微软雅黑";
    }
    div{
        font-size: 30px;
    }
</style>
<body>
    <div>
        你好
    </div>
</body>

この方法の利点：サブ要素は、独自のテキストサイズに応じて行の高さを自動的に調整できます。

3.優先順位

同じ要素に複数のセレクターが指定されている場合、優先順位が生成されます。

セレクターは同じで、カスケードが実行されます。
セレクターの重量によりセレクターが異なります。

重量表：
ここに画像の説明を挿入

といった：

<style>
    body {
        font-size: 12px;
    }
    div{
        font-size: 20px;
    }
    .one {
        font-size: 40px;
    }
</style>
<body>
    <div class="one">你好</div>
</body>

明らかに、最終的なフォントサイズは40pxです。

4.重複する権利

このコードを見ると、ラベルは同じです。カスケードを使用しないでください。最も近い方を使用してください。黒ではないでしょうか。最後に赤であるのはなぜですか。-これには、複合セレクターの重みが重なるという問題が含まれます。
ここで、ul liは2つの要素セレクターであるため、0,0,0,1 + 0,0,0,1 = 0,0,0,2であり、これがこの複合セレクターの重みです。

<style>
    ul li {
        color: red;
    }
    li {
        color: black;
    }
</style>
<body>
    <ul>
        <li>你好</li>
    </ul>
</body>

ここに画像の説明を挿入

その他の例：
ここに画像の説明を挿入