1
00:00:00,970 --> 00:00:01,550
OK。

2
00:00:01,590 --> 00:00:06,090
 

3
00:00:06,090 --> 00:00:10,650
このビデオでは、2つの重要なトピックを取り上げ、まだ話を進めていないと評価しています。これらは継承と特異性です。

4
00:00:10,650 --> 00:00:15,670
開始するには、継承が働く方法を実証し、評価を見てみましょう。

5
00:00:15,690 --> 00:00:17,730
だからここには単純なファイルがある。

6
00:00:18,000 --> 00:00:25,200
それは内部に4人の味方を持つ単一の井戸を持っています。私はスタイル・タグに自分のスタイルを書くつもりです。

7
00:00:25,200 --> 00:00:30,050
 

8
00:00:30,210 --> 00:00:33,800
しかし、実際にはこれを外部スタイルシートで行う方が常に良いです。

9
00:00:34,560 --> 00:00:41,070
 

10
00:00:44,580 --> 00:00:51,250
ですから、私はULのスタイルを設定して紫色にします。そうすると、私がリフレッシュすると実際に紫色になることがわかります。

11
00:00:51,270 --> 00:00:52,570
そこで何が起こったのですか？

12
00:00:52,620 --> 00:00:57,990
あなたは、彼らがULのスタイルを設定した領域のスタイルを知っていて、その嘘は間接的に変更され、その要素を親要素から継承しました。

13
00:00:57,990 --> 00:01:01,730
 

14
00:01:01,830 --> 00:01:04,350
ですから、もう一つの例を見せてください。

15
00:01:05,370 --> 00:01:07,410
 

16
00:01:10,850 --> 00:01:15,890
ここで段落を追加しましょう。それは黒く始まり、来るつもりです。これはあなたが今紫色にします。

17
00:01:15,900 --> 00:01:18,010
ですから、すべては普通の黒文字です。

18
00:01:18,010 --> 00:01:25,920
私は私のスタイルで行くと、私は体を言うと私は体に色の赤を与えると私はこれをリフレッシュする場合、これを少し大きくします。

19
00:01:26,010 --> 00:01:28,980
 

20
00:01:29,250 --> 00:01:31,370
すべてが赤であることがわかります。

21
00:01:32,040 --> 00:01:38,850
これは継承の概念を示しています。親にプロパティを設定すると、子要素にも影響を与えることができます。

22
00:01:38,850 --> 00:01:40,720
 

23
00:01:40,920 --> 00:01:46,310
ですから、すべての段落と同盟国すべてを読むようにしたいのであれば、これは素晴らしいことです。

24
00:01:46,350 --> 00:01:50,540
私たちは段落のように座って読んだり、同盟国を選んで赤くする必要はありません。

25
00:01:50,580 --> 00:01:52,690
私たちは体を選ぶだけです。

26
00:01:53,490 --> 00:02:00,840
だから私が示したい次のことは、私がここに入ると何が起きるのか、それから実際にそれが緑色になる段落を決定します。

27
00:02:01,320 --> 00:02:05,980
 

28
00:02:08,670 --> 00:02:12,630
リフレッシュすると、段落が緑色に変わったことがわかります。

29
00:02:12,630 --> 00:02:22,350
同様にulを緑色にしたい、または青色にしたい場合は、ULが青色に変わって保存してリフレッシュし、味方がそれを継承するので、味方も同様にします。

30
00:02:22,350 --> 00:02:24,830
 

31
00:02:25,170 --> 00:02:31,040
ここで何が起きているのかは実際にこの特異性とCSSAのアイデアを実証しています。

32
00:02:31,680 --> 00:02:36,530
だから我々はこの同盟国に影響を与える可能性のある複数のスタイルを持っている。

33
00:02:36,690 --> 00:02:43,410
それは赤色になる可能性があり、それは赤色で始まり、青色に戻ってきます。

34
00:02:43,410 --> 00:02:44,220
 

35
00:02:44,700 --> 00:02:52,410
 

36
00:02:52,410 --> 00:02:58,350
 

37
00:02:58,830 --> 00:03:08,190
 

38
00:03:08,190 --> 00:03:09,180
したがって、これらの要素の1つを調べて、このフルスクリーンを作成し、これを増やしてフォントサイズを少し増やすつもりなら、色が青色から青色に設定されていることがわかりますULから継承されており、スクロールし続けると体から継承されることがわかります。

39
00:03:09,300 --> 00:03:15,630
色は赤ですが、実際には外に出ているので、まったく適用されていません。

40
00:03:15,720 --> 00:03:17,990
そして、代わりにこのスタイルが適用されています。

41
00:03:18,150 --> 00:03:24,120
これは、このスタイルが適用されようとしているか、選択したこの要素を対象にしていますが、実際には適用されていないという意味です。

42
00:03:24,120 --> 00:03:28,640
 

43
00:03:29,850 --> 00:03:35,460
したがって、継承に非常に密接に関連する次のトピックは、特異性と呼ばれます。

44
00:03:36,030 --> 00:03:42,570
このアイデアは、ある要素を対象とした複数のスタイルを持つことができるという点で具体性があります。

45
00:03:42,570 --> 00:03:44,060
 

46
00:03:44,100 --> 00:03:49,050
このULやこの同盟国をターゲットにした複数のスタイルがあります。

47
00:03:49,320 --> 00:03:54,330
うそが赤くなっているか、このラインの対象となっています。

48
00:03:54,360 --> 00:03:56,600
身体のすべてが赤くなっている体。

49
00:03:56,700 --> 00:04:01,840
そしてそれはまた、すべてのジュエルズ・ブルーのすべてを変えるこのラインによって狙われている。

50
00:04:02,130 --> 00:04:05,310
それでSSはどちらが勝つかを決める必要があります。

51
00:04:05,370 --> 00:04:10,770
この場合、この要素に最も近いスタイルが使用されます。

52
00:04:10,770 --> 00:04:16,600
だから、どちらがより具体的で、それは身体が非常に一般的であることを意味するもので、それはすべてです。

53
00:04:17,280 --> 00:04:20,560
そして、ULは勝つときより具体的です。

54
00:04:20,910 --> 00:04:22,790
しかし、これは単純なケースです。

55
00:04:22,800 --> 00:04:27,140
だから今、少しだけ、セレクタを追加してセレクタを追加しましょう。

56
00:04:27,330 --> 00:04:35,160
それでは、直接アリーセレクタを追加して、同盟国のオレンジを作ってみましょう。

57
00:04:35,820 --> 00:04:39,100
そしてあなたが期待するように、それはすべての味方をオレンジ色にします。

58
00:04:39,180 --> 00:04:47,830
私たちが検査官を開くと、体に赤くなっているのが見えますが、それは横断されています。

59
00:04:48,180 --> 00:04:53,550
それはULセレクターによって青色になっていて、フライセレクターによってオレンジ色になっていて、1つは勝ちます。

60
00:04:53,550 --> 00:04:55,050
 

61
00:04:55,050 --> 00:04:59,200
だから、これらはどれが勝つのかがはっきりしている単純なケースです。

62
00:04:59,400 --> 00:05:02,590
しかし今、これの上に何かを紹介しよう。

63
00:05:02,940 --> 00:05:10,680
 

64
00:05:14,020 --> 00:05:24,460
今度はこれをハイライトと呼ばれるクラスにしたいとしましょう。私はそれを2つに渡して、次にこのクラスのハイライトを選択し、背景色を付けます。

65
00:05:25,120 --> 00:05:26,550
実際に色をつけましょう。

66
00:05:26,860 --> 00:05:31,090
ちょうど黄色と同じ性質の色ですので、私は保存します。

67
00:05:31,090 --> 00:05:33,040
あなたはどちらが今勝つだろうと思いますか？

68
00:05:33,610 --> 00:05:40,780
チェックしてみましょう。あなたはハイライトクラスが勝っていることがわかります。ハイクラスのクラスのために黄色に変わります。

69
00:05:40,780 --> 00:05:41,910
 

70
00:05:42,370 --> 00:05:48,400
これは、私たちにL. A.

71
00:05:48,670 --> 00:05:53,960
私たちは直接、すべての同盟国を対象とし、それらをオレンジ色にしています。そして、このクラスを持ついくつかの同盟国を直接対象にして黄色にしています。

72
00:05:54,190 --> 00:05:56,960
この場合、このクラスが勝ちです。

73
00:05:57,370 --> 00:06:01,420
実際にはどのように動作するかについては、実際には非常に特殊なルールがあります。

74
00:06:01,420 --> 00:06:02,100
 

75
00:06:02,140 --> 00:06:10,420
しかし、その前に私はちょうどもう一つの例を追加したいので、この要素にもIを与えてみましょう。 D.

76
00:06:10,420 --> 00:06:13,520
私はそれを特別なものと呼ぶつもりです。

77
00:06:13,610 --> 00:06:22,320
私はその要素を特別なものにするつもりだし、ピンクの色を付けてリフレッシュするつもりです。

78
00:06:22,330 --> 00:06:24,760
その要素が勝つことがわかります。

79
00:06:24,850 --> 00:06:32,770
もう一度、検査すれば、継承された井戸からは適用されないが、適用されないクラスから適用されない嘘からは適用されない体のスタイルがあることがわかります。

80
00:06:32,770 --> 00:06:38,570
 

81
00:06:38,570 --> 00:06:39,430
 

82
00:06:39,520 --> 00:06:43,660
そして、それから適用される特別なIDの1つ。

83
00:06:43,750 --> 00:06:46,790
この場合、IDが勝ちます。

84
00:06:47,020 --> 00:06:50,490
だから私が言及したように、この仕組みについては非常に具体的なルールがあります。

85
00:06:50,830 --> 00:06:52,690
そして私はそれらをここに書きました。

86
00:06:52,840 --> 00:06:57,310
しかし、実際には私はMに行くつもりです。

87
00:06:57,310 --> 00:07:02,320
Dと最初に彼らはあなたが読むことを強くお勧めし、どのように特異性が計算されるかについて話すこの素晴らしい記事があることを示しています。

88
00:07:02,320 --> 00:07:08,440
だから彼女は、この色が3色または4色であることを見ている。

89
00:07:08,560 --> 00:07:10,540
どれを選ぶかはどのように分かりますか？

90
00:07:10,810 --> 00:07:16,870
実際には計算を実行して、それらのセレクタのそれぞれに数値を割り当てます。

91
00:07:16,870 --> 00:07:19,210
 

92
00:07:19,420 --> 00:07:26,020
それで、ここに数値を代入し、次にこれに代入し、次にこれとこれに数値を代入します。

93
00:07:26,020 --> 00:07:27,180
 

94
00:07:27,220 --> 00:07:30,180
そして、我々が知っているように、これは勝ちます。

95
00:07:30,250 --> 00:07:36,340
だから実際に計算される方法は、実際に正確な数学を知る必要はありませんが、私はあなたにここでそれを示します。

96
00:07:36,340 --> 00:07:37,640
 

97
00:07:37,720 --> 00:07:43,810
実際にオンラインに入力して特定のものがどのようになっているのかを示す電卓があります。

98
00:07:43,810 --> 00:07:44,470
 

99
00:07:44,800 --> 00:07:51,920
ですから、もし私がすべての同盟国を選ぶだけであれば、それは1つの特異性を持っていることがわかります。

100
00:07:51,940 --> 00:07:59,560
今度はそのクラスのハイライトを見てみましょう。具体的には10の特異性の10倍です。

101
00:08:00,040 --> 00:08:04,380
だからこそ、嘘の上にあるクラス1があります。

102
00:08:04,390 --> 00:08:11,530
それで、この要素が実際に黄色であるのは、そのクラスのハイライトがオレンジ色を上回っていたからです。

103
00:08:11,530 --> 00:08:12,510
 

104
00:08:13,180 --> 00:08:15,430
今私達が行くと私は私を追加します。 D.

105
00:08:18,430 --> 00:08:24,660
私たちがあなたが見ることができるスペシャルと呼ぶものは、法律のタグだけでは100倍も具体的です。

106
00:08:24,790 --> 00:08:28,540
1つが勝ち、それはクラスを打つ。

107
00:08:28,540 --> 00:08:36,670
ここでの基本的なルールは、要素セレクタのタグ名があまり具体的ではないということです。クラスセレクタははるかに具体的であり、IDは最も具体的です。

108
00:08:36,670 --> 00:08:41,340
 

109
00:08:41,650 --> 00:08:44,920
そして、私はそれが1つのIDだけに限られていないことも示します。

110
00:08:44,950 --> 00:08:48,330
だからもっと具体的なものが何であるかを知りたいとしましょう。

111
00:08:48,340 --> 00:08:53,320
私にはクラスとクラスがあります。

112
00:08:53,320 --> 00:08:59,170
だから、これは子孫のセレクタです。これはたった20の特異性であることを忘れないでください。

113
00:08:59,530 --> 00:09:05,160
そして、もし私がただ一つのIを持っていれば。 D. それは100の特異性です。

114
00:09:05,170 --> 00:09:09,970
だから私はあなたがいつもサイトを使い、数字を計算する必要があると思うことを望んでいません。

115
00:09:10,180 --> 00:09:11,440
それは重要ではない。

116
00:09:11,440 --> 00:09:16,360
あなたが知る必要があるのはすべて大小の順序なので、私はここで私のノートに行き、型セレクタを書き留めてもらうようにします。

117
00:09:16,360 --> 00:09:19,930
 

118
00:09:19,930 --> 00:09:28,390
だからこそ、このような、あるいはそれの中のATF、あるいは隣接するセレクタのようなもののように見えるでしょう。

119
00:09:28,390 --> 00:09:30,580
 

120
00:09:30,700 --> 00:09:34,190
したがって、これらのセレクタはあまり具体的ではありません。

121
00:09:34,330 --> 00:09:38,860
しかし今年中でさえこれはこれよりも具体的になるだろう。

122
00:09:38,890 --> 00:09:43,870
これは、我々が参照している2つの要素があるため、これよりも具体的になるでしょう。

123
00:09:44,200 --> 00:09:47,360
実際に計算した場合、これは特異性です。

124
00:09:47,530 --> 00:09:48,850
そしてこれは2つです。

125
00:09:49,570 --> 00:09:52,780
次に、次のレベルはクラスです。

126
00:09:53,890 --> 00:10:01,610
だから、これはこれらのどれよりも10倍以上の大きさのオーダーになるでしょう。

127
00:10:02,320 --> 00:10:04,380
属性セレクタも同様です。

128
00:10:04,420 --> 00:10:16,600
ですから、入力タイプがテキストと等しく、ホバーのような擬似クラスセレクタもあります。

129
00:10:16,600 --> 00:10:19,660
 

130
00:10:19,750 --> 00:10:26,890
ホバー上のタグ、またはチェックされた入力、そしてそこにこのコロンがあるような他のもの。

131
00:10:28,060 --> 00:10:31,890
そして、最も具体的なのは私です。 D. セレクタ。

132
00:10:32,230 --> 00:10:37,840
そして、それはここでセレクタよりも大きいか、またはより特定の大きさの別のオーダーになるでしょう。