なぜブログから：問題が発生した今日：クラス名タグの重量はどのくらいですか？この私は非常に明確ではなかった、ショートカットを取りたいと思っていた：他の誰か、Baiduのを聞いて、ああ......同級生を尋ね、彼が直接20開くと言った。私は髪が20であるために尋ねた、彼は10タグ名は、クラス名が10であることを特徴とします20の合計。私は重量のラベル名1の後、彼はまた間違って感じたことを指摘しました。私は少しBaiduの、私は結果を取得できませんでした。その検証プロセスは小さなブログを書くことができると感じ、その後、現時点では非常に遅くはありませんが、私はドラッグしません、乾いた咳です。
タグは、そのような名前の要素があります。クラス名タグは、と解釈することができます。
私たちはすべてのことを知っています：
- 重いIDセレクタ重量0,1,0,0。
- クラスセレクタ、セレクタまたは0,0,1,0重いような擬似右側の属性。
- 右の要素と0,0,0,1重い擬似要素。
- 右の要素と0,0,0,1重い擬似要素。
- *ワイルドカードセレクタは、0,0,0,0である重量のために寄与しません。
- ！最後に、特殊な記号は重要、それはメモリを容易にするために、それは1,0,0,0,0の重量と考えることができ、最高の優先度です。
高い重みは、高いスタイルの優先順位が適用されるが、ハードカバーの他のスタイルについてです。
次のようにADOは、重量コードを計算することです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标签.类名的权重是多少？</title>
<style>
/* 权重：10+10=20 位置：1*/
.container .child{
color: red;
}
/* 权重：10 位置：2*/
.child{
color: blue;
}
/* 权重：10+1=11 位置：3*/
.container p{
color: green;
}
/* 权重是多少呢？ 位置：4*/
p.child{
color: yellow;
}
</style>
</head>
<body>
<div class="container">
<p class="child">标签.类名的权重是多少?</p>
</div>
</body>
</html>
方法I計算：クラス名タグの重量を算出する重量と同じ重量クラス名にスタイルシートをカスケード右既知のパターンを比較し、後者の上書き前のスタイルのスタイルパターン、。入れて、特定のコードが実現されます。スタイルを定義することにより、重み値を得るために、結果をレンダリングするブラウザを表示するには、テキストの色のpタグを変更します。
効率的にこの値を計算するために、我々は、スタイルをデバッグするようにブラウザに指示します。
まず、上記のコードの直接の実装、次の結果がスクリーンショット：
分析：私たちは、クラス名の重みが10であることを知っている、2人のクラス名は、重量を重畳20であり、非常に上部に、このパターンの位置、他のスタイルの同じラベルに追加するには効果的ではないので、他のスタイルの重みは以下です20;
第二に、第二の高重量のスタイルをレンダリングしたスタイルブラウザのレンダリングを、見るために力のブラウザのスタイルで直接キャンセルは次のように、ショットの結果が何であるか、おそらく次のとおりです。
分析：この重量はそれを2番目に高いされていますか？我々は以前、このスタイルの上記のコードラベルクラス名は最後に書かれている、我々は最初の位置のスタイルを変更して、結論;.でき後方オーバーライドで右のスタイル、カスケーディング・スタイル・シートとその重みを知って
、次の他の位置では、次に実行します。
コードは以下の通りであります：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>标签.类名的权重是多少？</title>
<style>
/* 权重：10+10=20 位置：1*/
/*.container .child{
color: red;
}*/
/* 权重是多少呢？ 位置：4*/
p.child{
color: yellow;
}
/* 权重：10 位置：2*/
.child{
color: blue;
}
/* 权重：10+1=11 位置：3*/
.container p{
color: green;
}
</style>
</head>
<body>
<div class="container">
<p class="child">标签.类名的权重是多少?</p>
</div>
</body>
</html>注：スタイルのクラス名が第2の位置aに呼ばれ、前の操作によって、我々はすでにクラス重量のタグ名を知られているラベルには、我々はここで直接ダブルクラス名の右側に、20未満である注釈にリセットされます。アウト。
次のようにコードを再実行し、結果ショットは以下のとおりです。
分析：交換位置と上記の結果の結果が一致していない後、ので、ここであるため右のスタイルの酒と上書き重いでスタイルにあります。ここで、である、同じ、（クラス名タグ）重量と重量を引くことができる（クラスのタグ名。）11。
要約：ラベルの右の重量クラス名は11です。
まあ、天気はとても暑い結果にブログも終了し、午後を活用することではない、ない熱いレンガ、レンガQubanすぐ。