最初の質問
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>第1题</title>
<style type="text/css">
div div{
color:blue;
}
div{
color:red;
}
</style>
</head>
<body>
<div>
<div>
<div>
试问这行字体是什么颜色的？
</div>
</div>
</div>
</body>
</html>
2番目の質問
<!DOCTYPE>
<html>
<head>
<title>第2题</title>
<style type="text/css">
#father{
color:red;
}
p {
color:blue;
}
</style>
</head>
<body>
<div id="father">
<p>试问这行字体是什么颜色的？</p>
</div>
</body>
</html>
3番目の質問
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
div div div div div div div div div div div div{
color:red;
}
.me {
color:blue;
}
</style>
</head>
<body>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div>
<div class="me">
试问这行文字是什么颜色的
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
4番目の質問
<!DOCTYPE>
<html>
<head>
<meta content="text/html;charset=utf-8" />
<title>第4题</title>
<style type="text/css">
div p {
color:red;
}
#father {
color:red;
}
p.c2{
color:blue;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
</html>
5番目の質問
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
.c1 .c2 div{
color: blue;
}
div #box3 {
color:green;
}
#box1 div {
color:yellow;
}
</style>
</head>
<body>
<div id="box1" class="c1">
<div id="box2" class="c2">
<div id="box3" class="c3">
文字
</div>
</div>
</div>
</body>
</html>
6番目の質問
<!DOCTYPE>
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>第6题</title>
<style type="text/css">
#father #son{
color:blue;
}
#father p.c2{
color:black;
}
div.c1 p.c2{
color:red;
}
#father{
color:green !important;
}
</style>
</head>
<body>
<div id="father" class="c1">
<p id="son" class="c2">
试问这行字体是什么颜色的？
</p>
</div>
</body>
</html>
詳細
CSSの優先順位（強調）
-
概念：
CSSスタイルを定義するとき、2つ以上のルールが同じ要素に適用されているように見えることがよくあります。現時点では、
- セレクターが同じ場合、カスケードが実行されます
- セレクターが異なると、優先順位の問題が発生します。
1）重量計算式
CSSの重みに関しては、計算するための一連の計算式が必要です。これはCSSの特異性（特異性）です。
| ラベルセレクター | 計算式 |
|---|---|
| 継承または* | 0,0,0,0 |
| 各要素（タグセレクター） | 0,0,0,1 |
| 各クラス、疑似クラス | 0,0,1,0 |
| 各ID | 0,1,0,0 |
| 各ラインスタイルstyle = "" | 1,0,0,0 |
| すべての！重要な重要 | ∞無限大 |
- 値は左から右へ、左側で最大、1つのレベルは1つのレベルよりも大きく、数字の間に基数はなく、レベルを超えることはできません。
- CSSの重みに関しては、計算するための一連の計算式が必要です。これはCSSの特異性（特異性）です。
- div { 色：ピンク！重要; }
2）重複する権利
複数の基本セレクターで構成される交差セレクターや子孫セレクターなどをよく使用するため、この時点で重みのオーバーラップが発生します。
簡単な足し算計算です
-
div ul li -------> 0,0,0,3
-
.nav ul li ------> 0,0,1,2
-
a：ホバー-------> 0,0,1,1
-
.nav a ------> 0,0,1,1
注意：
- 数字の間に基数はありません。例：0,0、1、0ではなく0,0,0,5 + 0,0,0,5 = 0,0,0,10なので、10はありません。 divs。クラスセレクターの状況に追いつきます。
3）継承された重みは0です
これは難しいことではありませんが、無視すると混乱しやすくなります。実際、スタイルを変更するときは、ラベルが選択されているかどうかを確認する必要があります。
1）選択した場合、重量は上記の式で計算されます。誰が誰に耳を傾けるのか。
2）選択されていない場合、継承された重みは0であるため、重みは0になります。
回答：
- 質問1：青
- 質問2：青
- 質問3：青
- 4番目の質問：青
- 質問5：黄色
- 6番目の質問：青
*免責事項：この記事はインターネット上および作者によって作成されています。著作権は元の作品に帰属します。権利を侵害している場合は、作者に連絡して削除してください。