Comment trouver des s\u00e9lecteurs CSS<\/h2>\n
Vous n’avez besoin que d’un seul outil et vous l’avez d\u00e9j\u00e0: un navigateur !<\/p>\n
Chaque navigateur dispose d’un ensemble d’ outils<\/a> de d\u00e9veloppement<\/a> qui peuvent \u00eatre utilis\u00e9s pour examiner un site Web. J’utiliserai Chrome<\/a>, mais vous pouvez utiliser n’importe quel navigateur moderne. Ils ont tous un ensemble d’outils extr\u00eamement similaires.<\/p>\n Tout d’abord, ouvrez votre page d’accueil dans un nouvel onglet.<\/p>\n Faites un clic droit n’importe o\u00f9 sur la page et s\u00e9lectionnez l’option "Afficher la source". Cela ouvrira une page qui ressemble \u00e0 ceci dans un nouvel onglet\u00a0:<\/p>\n Le code source de www.competethemes.com<\/p>\n Il s’agit du code HTML brut de la page Web. C’est ce que Google, votre navigateur et tout autre logiciel verront lorsqu’ils visiteront votre site. C’est le code que votre navigateur rend dans un site Web avec lequel vous pouvez interagir.<\/p>\n Il est important de comprendre que chaque page de votre site est compos\u00e9e de HTML comme celui-ci.<\/p>\n Bien qu’il soit int\u00e9ressant de voir le code derri\u00e8re le site Web, il existe un moyen meilleur et plus utile pour nous de le voir.<\/p>\n Revenez \u00e0 votre page d’accueil, cliquez avec le bouton droit sur n’importe quelle partie de la page et s\u00e9lectionnez cette fois l’option \u00ab\u00a0Inspecter\u00a0\u00bb (elle pourrait indiquer \u00ab\u00a0Inspecter l’\u00e9l\u00e9ment\u00a0\u00bb). Cela ouvrira les outils de d\u00e9veloppement de votre navigateur pr\u00e9sentant une fen\u00eatre comme celle-ci\u00a0:<\/p>\n C’est une autre fa\u00e7on d’afficher le m\u00eame code HTML que vous venez de voir lors de l’affichage du code source. La diff\u00e9rence est que nous avons maintenant une hi\u00e9rarchie avec laquelle nous pouvons naviguer et interagir.<\/p>\n Si tout cela semble \u00e9trange et accablant, ce n’est pas grave. Le but ici n’est pas de ma\u00eetriser les outils de d\u00e9veloppement de votre navigateur, c’est de trouver un s\u00e9lecteur CSS sur le site.<\/p>\n Dans vos outils de d\u00e9veloppement, il y a un c\u00f4t\u00e9 gauche et un c\u00f4t\u00e9 droit. Le c\u00f4t\u00e9 gauche a une hi\u00e9rarchie du code HTML dans lequel nous pouvons naviguer. Vous pouvez ignorer compl\u00e8tement le c\u00f4t\u00e9 droit.<\/p>\n Maintenant, si vous passez votre souris sur les \u00e9l\u00e9ments HTML dans les outils de d\u00e9veloppement, vous remarquerez quelque chose de vraiment cool. Chaque \u00e9l\u00e9ment est mis en \u00e9vidence sur la page lorsque vous le survolez.<\/p>\n Cela facilite l’acc\u00e8s \u00e0 l’\u00e9l\u00e9ment que vous voulez. En fait, vous n’avez pas vraiment besoin de comprendre le code HTML pour trouver l’\u00e9l\u00e9ment que vous recherchez.<\/p>\n Il existe deux fa\u00e7ons d’acc\u00e9der rapidement \u00e0 l’\u00e9l\u00e9ment que vous devez cibler.<\/p>\n Disons que j’ai besoin d’acc\u00e9der \u00e0 un lien dans ma pagination. Je peux cliquer avec le bouton droit quelque part sur la page, puis utiliser les fl\u00e8ches d\u00e9roulantes pour acc\u00e9der au lien.<\/p>\n Chaque fois que je clique sur une fl\u00e8che, elle r\u00e9v\u00e8le les \u00e9l\u00e9ments contenus dans cet \u00e9l\u00e9ment. Cela est souvent n\u00e9cessaire, mais la m\u00e9thode suivante peut \u00eatre encore plus simple et plus rapide.<\/p>\n Parfois, vous pouvez s\u00e9lectionner l’\u00e9l\u00e9ment exact que vous voulez. Pour ce faire, cliquez avec le bouton droit sur l’\u00e9l\u00e9ment et les outils de d\u00e9veloppement s’ouvriront en mettant d\u00e9j\u00e0 en \u00e9vidence cet \u00e9l\u00e9ment.<\/p>\n Voici comment naviguer vers le m\u00eame lien de pagination avec cette m\u00e9thode plus rapide.<\/p>\n Une fois que vous avez localis\u00e9 l’\u00e9l\u00e9ment HTML que vous recherchez, la derni\u00e8re \u00e9tape consiste \u00e0 copier le s\u00e9lecteur CSS<\/a>.<\/p>\n Dans la capture d’\u00e9cran ci-dessous, vous pouvez voir que je survole le lien de la page deux.<\/p>\nAfficher le code HTML de votre site<\/h3>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181938-6170021ca44f7.png\")
<\/a><\/p>\nObtenez une meilleure vue du HTML<\/h3>\n
Naviguer dans le HTML<\/h3>\n
M\u00e9thode 1: Naviguez \u00e0 l’aide des fl\u00e8ches<\/h4>\n
M\u00e9thode 2: cliquez avec le bouton droit sur l’\u00e9l\u00e9ment<\/h4>\n
Obtenez le s\u00e9lecteur CSS<\/h3>\n
![\"Comment](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181938-61700222c9d2d.png\")
<\/a><\/p>\n