1
00:00:00,970 --> 00:00:01,550
D'ACCORD.

2
00:00:01,590 --> 00:00:10,650
Donc, dans cette vidéo, nous allons aborder deux sujets importants et voir évaluer que nous n'avons pas vraiment parlé encore et qui sont l'héritage et la spécificité.

3
00:00:10,650 --> 00:00:15,670
Donc, pour commencer, nous allons démontrer la façon dont fonctionne l'héritage et voir évaluer.

4
00:00:15,690 --> 00:00:17,730
J'ai donc un fichier simple ici.

5
00:00:18,000 --> 00:00:30,050
Il a un seul puits avec quatre alliés à l'intérieur et je vais écrire mes styles dans une balise de style juste pour le rendre facile pour vous de regarder vous n'avez pas à me regarder retourner entre les fichiers.

6
00:00:30,210 --> 00:00:33,800
Mais il est toujours préférable de le faire dans une feuille de style externe.

7
00:00:34,560 --> 00:00:51,250
Donc, je vais le style de l'UL et de lui donner une couleur de pourpre et quand je fais que vous verrez que lorsque je rafraîchir les alliés deviennent réellement violet.

8
00:00:51,270 --> 00:00:52,570
Alors ce qui s'est passé là.

9
00:00:52,620 --> 00:01:01,730
Vous savez que j'ai stylé la zone où ils ont appelé l'UL et le mensonge a été indirectement changé et il a hérité de cette couleur de l'élément parent.

10
00:01:01,830 --> 00:01:04,350
Permettez-moi de vous montrer un autre exemple.

11
00:01:05,370 --> 00:01:15,890
Ajoutons juste un paragraphe ici, il commence noir et je vais venir et tout ce vous violet pour l'instant.

12
00:01:15,900 --> 00:01:18,010
Donc, tout est juste texte noir normal.

13
00:01:18,010 --> 00:01:28,980
Je vais faire un peu plus grand si je vais dans mon style et je dis corps et je donne au corps une couleur de couleur rouge et je rafraîchir ce.

14
00:01:29,250 --> 00:01:31,370
Vous verrez que tout est rouge.

15
00:01:32,040 --> 00:01:40,720
Donc, ce n'est que la démonstration de ce concept d'héritage où si nous définissons une propriété sur un parent, il peut également affecter un élément enfant.

16
00:01:40,920 --> 00:01:46,310
Donc, c'est bien si nous voulons faire lire tous les paragraphes et les alliés.

17
00:01:46,350 --> 00:01:50,540
Nous n'avons pas à nous asseoir comme des paragraphes et les faire lire, puis sélectionnez des alliés et de les transformer en rouge.

18
00:01:50,580 --> 00:01:52,690
Nous pouvons simplement sélectionner le corps.

19
00:01:53,490 --> 00:02:05,980
Donc, la prochaine chose que je veux montrer est ce qui se passe si je vais ici et puis je décide qu'un paragraphe je veux vraiment qu'il soit vert.

20
00:02:08,670 --> 00:02:12,630
Si nous rafraîchissons, nous verrons bien sûr que le paragraphe est devenu vert.

21
00:02:12,630 --> 00:02:24,830
De même si je veux que l'ul soit vert ou que nous allons faire bleu et je sauve et rafraîchir l'UL devient bleu et ainsi faire les alliés parce qu'ils héritent de cela.

22
00:02:25,170 --> 00:02:31,040
Donc ce qui se passe ici est en fait démontrer cette idée de spécificité et CSSA.

23
00:02:31,680 --> 00:02:36,530
Donc, nous avons plusieurs styles qui pourraient avoir un impact sur ce même allié.

24
00:02:36,690 --> 00:02:44,220
Il pourrait être rouge et il commence comme le rouge et puis le retourner bleu parce que tout ce que vous êtes censé être bleu.

25
00:02:44,700 --> 00:03:09,180
Donc, si nous allons de l'avant et d'inspecter un de ces éléments et je vais faire ce plein écran et je vais augmenter cela et augmenter la taille de la police un peu trop vous verrez que la couleur est définie en bleu en provenance de Un UL et il nous dit hérité de UL et si nous continuons à défiler vous verrez hérité de corps.

26
00:03:09,300 --> 00:03:15,720
La couleur est rouge, mais il est effectivement rayé et donc cela signifie qu'il n'est pas appliqué du tout.

27
00:03:15,720 --> 00:03:17,990
Et ce style est plutôt appliqué.

28
00:03:18,150 --> 00:03:28,640
Donc, cela nous montre que ce style tente d'être appliqué ou qu'il cible cet élément que nous avons sélectionné, mais il est rayé, ce qui signifie qu'il n'est pas appliqué.

29
00:03:29,850 --> 00:03:35,460
Ainsi, le sujet suivant qui est très étroitement lié à l'héritage est appelé spécificité.

30
00:03:36,030 --> 00:03:44,060
Donc, la spécificité est cette idée dans le sens que nous pouvons avoir plusieurs styles ciblant un élément et qui se passe ici.

31
00:03:44,100 --> 00:03:49,050
Nous avons plusieurs styles ciblant cette UL ou cet allié par exemple.

32
00:03:49,320 --> 00:03:54,330
Le mensonge est devenu rouge ou il est visé par cette ligne.

33
00:03:54,360 --> 00:03:56,600
Corps qui tourne tout dans le corps rouge.

34
00:03:56,700 --> 00:04:01,840
Et il est également visé par cette ligne qui transforme tout dans le tout bleu Juelz.

35
00:04:02,130 --> 00:04:05,310
Et alors, le SS doit décider lequel gagne.

36
00:04:05,370 --> 00:04:10,770
Et dans ce cas, quel que soit le style le plus proche de cet élément.

37
00:04:10,770 --> 00:04:16,930
Donc, celui qui est plus spécifique et donc ce que cela signifie est le corps est très général c'est tout.

38
00:04:17,280 --> 00:04:20,560
Et un UL est plus spécifique que quand il va gagner.

39
00:04:20,910 --> 00:04:22,790
Mais ce n'est qu'un cas simple.

40
00:04:22,800 --> 00:04:27,140
Alors maintenant, montons un peu l'ante et ajou- tez un peu plus de sélecteurs.

41
00:04:27,330 --> 00:04:35,160
Alors allons-y et ajoutez un sélecteur allié direct et faisons un allié orange.

42
00:04:35,820 --> 00:04:39,100
Et comme vous vous attendez, cela rend tous les alliés orange.

43
00:04:39,180 --> 00:04:47,830
Et si nous ouvrons l'inspecteur, nous verrons que le corps le rougit, mais il est rayé.

44
00:04:48,180 --> 00:04:55,050
Il est devenu bleu par le sélecteur UL et puis il est tourné orange par le sélecteur de mouche et que l'on gagne.

45
00:04:55,050 --> 00:04:59,200
Donc, ce sont tous des cas simples où il est assez clair que l'on gagne.

46
00:04:59,400 --> 00:05:02,590
Mais maintenant, nous allons introduire quelque chose en plus de cela.

47
00:05:02,940 --> 00:05:24,950
Disons maintenant que je veux que cela ait une classe appelée mettre en surbrillance et je vais le donner à deux d'entre eux et puis je sélectionne cette classe en surbrillance et je donne une couleur de fond.

48
00:05:25,120 --> 00:05:26,550
En fait, il suffit de rester avec la couleur.

49
00:05:26,860 --> 00:05:31,090
Juste pour que tout soit la même couleur de propriété de jaune et je sauve.

50
00:05:31,090 --> 00:05:33,040
Lequel pensez-vous va gagner maintenant.

51
00:05:33,610 --> 00:05:41,910
Nous allons vérifier et vous pouvez voir que la classe de mise en évidence gagne et il est devenu jaune en raison de cette haute comme la classe.

52
00:05:42,370 --> 00:05:53,960
Donc, cela nous montre quelque chose où, en L.A. Nous ciblons directement tous les alliés et les rendons orange et nous visons également directement quelques alliés qui ont cette classe et qui les rendent jaunes.

53
00:05:54,190 --> 00:05:56,960
Et dans ce cas cette classe gagne.

54
00:05:57,370 --> 00:06:02,100
Il y a donc des règles très précises sur la façon dont cela fonctionne et je vais vous le montrer en seulement une seconde.

55
00:06:02,140 --> 00:06:13,520
Mais avant cela, je veux juste ajouter un autre exemple, alors disons aussi donner à cet élément un I.D. Et je vais l'appeler spécial.

56
00:06:13,610 --> 00:06:22,320
Je vais cibler cet élément spécial et je vais lui donner une couleur de rose et je rafraîchir.

57
00:06:22,330 --> 00:06:24,760
Vous verrez que cet élément gagne.

58
00:06:24,850 --> 00:06:39,430
Et une fois de plus si nous inspectons, vous verrez que nous avons un style du corps qui n'est pas appliqué à partir du puits qui est hérité mais pas appliqué un du mensonge qu'il n'est pas appliqué un de la classe qui n'est pas appliquée.

59
00:06:39,520 --> 00:06:43,660
Et puis un de la spéciale d'identification qui est appliquée.

60
00:06:43,750 --> 00:06:46,790
Donc, dans ce cas, l'ID gagne.

61
00:06:47,020 --> 00:06:50,490
Donc, comme je l'ai mentionné, il ya des règles très spécifiques quant à la façon dont cela fonctionne.

62
00:06:50,830 --> 00:06:52,690
Et je les ai écrites ici.

63
00:06:52,840 --> 00:07:02,320
Mais en fait, je vais aller à M.D et d'abord pour vous montrer qu'ils ont un excellent article sur ce que je vous recommande fortement de lire et il parle de la façon dont la spécificité est calculée.

64
00:07:02,320 --> 00:07:08,440
Donc quand elle voit qu'il ya trois ou quatre couleurs différentes que celui-ci pourrait être.

65
00:07:08,560 --> 00:07:10,540
Comment sait-il qui choisir?

66
00:07:10,810 --> 00:07:19,210
Et la façon dont il le fait effectivement exécute le calcul de sorte qu'il attribue une valeur numérique à chacun de ces sélecteurs.

67
00:07:19,420 --> 00:07:27,180
Donc, il va attribuer une valeur numérique à ce ici et puis à celui-ci et puis à celui-ci et à celui-ci.

68
00:07:27,220 --> 00:07:30,180
Et comme nous le savons, celui-ci gagne.

69
00:07:30,250 --> 00:07:37,640
Donc, la façon dont il est effectivement calculé, nous n'avons pas vraiment à connaître les mathématiques exactes, mais je vais vous le montrer ici.

70
00:07:37,720 --> 00:07:44,470
Il ya une calculatrice que nous pouvons effectivement les choses de type en ligne qui va nous dire comment spécifique quelque chose est.

71
00:07:44,800 --> 00:07:51,920
Donc si je viens de sélectionner tous les alliés, vous verrez qu'il a la spécificité d'un.

72
00:07:51,940 --> 00:07:59,810
Maintenant, essayons de coiffer cette mise en évidence de classe et cela est 10 fois plus spécifique que la spécificité de 10.

73
00:08:00,040 --> 00:08:04,380
C'est pourquoi une classe 1 sur le mensonge.

74
00:08:04,390 --> 00:08:12,510
Et c'est pourquoi cet élément est en fait jaune parce que la classe de souligner gagné sur la couleur orange.

75
00:08:13,180 --> 00:08:15,430
Maintenant, si nous allons et nous ajoutons un I.D.

76
00:08:18,430 --> 00:08:24,660
Ou ce que nous appelons un spécial, vous pouvez le voir qui est 100 fois plus spécifique que juste l'étiquette de la loi.

77
00:08:24,790 --> 00:08:28,540
Pour que l'on gagne et que bat aussi la classe.

78
00:08:28,540 --> 00:08:41,340
Donc, la règle de base ici est que les sélecteurs d'éléments noms de balises ne sont pas des sélecteurs de classe très spécifique sont beaucoup plus spécifiques et les ID sont les plus spécifiques que vous pouvez obtenir.

79
00:08:41,650 --> 00:08:44,920
Et je vais aussi vous montrer que ce n'est pas limité à un seul ID.

80
00:08:44,950 --> 00:08:48,330
Disons que nous voulions savoir ce qui est plus précis.

81
00:08:48,340 --> 00:08:53,320
J'ai une classe et une autre classe à l'intérieur.

82
00:08:53,320 --> 00:08:59,170
Donc, c'est un descendant de Selecta, n'oubliez pas que ce n'est que 20 spécificité.

83
00:08:59,530 --> 00:09:05,160
Et si j'ai juste un seul I.D. C'est une spécificité.

84
00:09:05,170 --> 00:09:10,120
Encore une fois, je ne veux pas que vous pensiez que vous devez utiliser le site tout le temps et calculer les chiffres.

85
00:09:10,180 --> 00:09:11,440
Ce n'est pas important.

86
00:09:11,440 --> 00:09:19,930
Tout ce que vous devez savoir est l'ordre des grandeurs donc je vais aller à mes notes ici et les ont écrites sélecteurs de type sont les moins spécifiques.

87
00:09:19,930 --> 00:09:30,580
Donc cela va ressembler à quelque chose comme ceci ou allié avec un ATF à l'intérieur de celui-ci ou même le sélecteur adjacent.

88
00:09:30,700 --> 00:09:34,190
Ces sélecteurs ne sont donc pas très précis.

89
00:09:34,330 --> 00:09:38,860
Mais même cette année, cela va être plus précis que cela.

90
00:09:38,890 --> 00:09:44,050
Cela va être plus précis que cela aussi parce qu'il ya deux éléments que nous référençons.

91
00:09:44,200 --> 00:09:47,360
Donc, si nous avons effectivement calculé que c'est la spécificité d'un.

92
00:09:47,530 --> 00:09:48,850
Et c'est deux.

93
00:09:49,570 --> 00:09:52,780
Ensuite, le niveau suivant est une classe.

94
00:09:53,890 --> 00:10:01,610
Donc, cela va être un ordre de grandeur 10 fois plus grand ou plus spécifique que n'importe lequel de ceux-ci.

95
00:10:02,320 --> 00:10:04,380
Et ainsi est le sélecteur d'attribut.

96
00:10:04,420 --> 00:10:19,660
Donc, où nous avons des choses comme le type d'entrée est égal au texte et sont donc ces sélecteurs pseudo-classe qui sont des choses comme vol stationnaire.

97
00:10:19,750 --> 00:10:27,360
Donc, une balise sur le vol stationnaire ou d'entrée qui a été vérifiée et d'autres choses comme ça qui ont ce côlon là-bas.

98
00:10:28,060 --> 00:10:31,890
Et puis la chose la plus spécifique est l'I.D. sélecteur.

99
00:10:32,230 --> 00:10:38,260
Donc, cela va être un ordre de grandeur plus ou plus précis que les sélecteurs ici.