CSSの3大特徴

CSS には、カスケード、継承、および優先度という 3 つの特徴があります。

継承

機能: 子要素は親要素スタイルの特性を継承します

例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      div{
      
      
          color: blue;
      }
    </style>
</head>
<body>
<div>
    <p>这是一个段落</p>
</div>
</body>
</html>

効果：
ここに画像の説明を挿入
divにスタイルを設定するのですが、div内にpタグがあるのですが、CSSの継承のため、pタグはdivのスタイルを継承して青くなります

CSSの継承はいいけど全部継承できるわけじゃない

控制文字的属性都能继承,不能控制文字属性的都不能继承

継承失敗の 2 つのケース:

タグの色が無効になります
h シリーズの font-size は無効になります

カスケード

CSS 自体はカスケーディングスタイルシートと呼ばれます。カスケーディングもよく理解されています。つまり、ラベルにさまざまなスタイルを設定し、最終的に一緒にカスケードしてラベルに作用します。

当样式冲突时,只有当选择器优先级相同时,才会通过层叠性判断效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      p {
      
      
          color: red;
          color: blue;
      }
    </style>
</head>
<body>
<div>
    <p>这是一个段落</p>
</div>
</body>
</html>

効果:
ここに画像の説明を挿入
p タグの色を 2 回設定しましたが、後者の色が前の色を上書きします。これは CSS のカスケードラインです。

優先順位

セレクターごとに優先度が異なり、優先度の高いセレクタースタイルは優先度の低いセレクタースタイルをオーバーライドします。

優先度の大小関係：
继承<通配符选择器<标签选择器<类选择器<id选择器<行内选择器<!important

!important は、属性値の後のセミコロンの前に記述する必要があります

その場合は复合选择器、重み計算によってどのセレクターが有効になるかを決定する必要があります.
複合セレクターでは、インラインの id セレクタークラスセレクターとラベルセレクターの数がそれぞれ比較されます. 比較規則
:

左から右に比較し、大きさが比較できれば後で比較する必要はなく、同じであれば引き続き後者を比較します。
全部同じなら、誰が下に書いて、どれを下に書いて、どれを聞くかによる

注意:!important如果不是继承,那么权重最高

ご覧いただきありがとうございます! この記事があなたのお役に立てば幸いです!
Web フロントエンド開発コラムは常に更新されていますので、購読を歓迎します!
「あなたを励まし、一緒に働きたい!」

【Webフロントエンド開発】CSSの三大特徴を語る

記事ディレクトリ

CSSの3大特徴

継承

カスケード

優先順位

おすすめ