So finden Sie CSS-Selektoren<\/h2>\n
Sie brauchen nur ein Tool und Sie haben es bereits: einen Browser!<\/p>\n
Jeder Browser verf\u00fcgt \u00fcber eine Reihe von Entwicklertools<\/a>, mit denen eine Website untersucht werden kann. Ich werde Chrome verwenden<\/a>, aber Sie k\u00f6nnen jeden beliebigen modernen Browser verwenden. Sie alle verf\u00fcgen \u00fcber einen \u00e4u\u00dferst \u00e4hnlichen Satz von Werkzeugen.<\/p>\n \u00d6ffnen Sie zun\u00e4chst Ihre Homepage in einem neuen Tab.<\/p>\n Klicken Sie mit der rechten Maustaste auf eine beliebige Stelle auf der Seite und w\u00e4hlen Sie die Option "Quelle anzeigen". Dadurch wird eine Seite ge\u00f6ffnet, die in einem neuen Tab wie folgt aussieht:<\/p>\n Der Quellcode f\u00fcr www.competethemes.com<\/p>\n Dies ist der rohe HTML-Code der Webseite. Dies sehen Google, Ihr Browser und jede andere Software, wenn sie Ihre Website besucht. Es ist der Code, den Ihr Browser in eine Website rendert, mit der Sie interagieren k\u00f6nnen.<\/p>\n Es ist wichtig zu verstehen, dass jede Seite Ihrer Website aus HTML wie diesem besteht.<\/p>\n Es ist zwar cool, den Code hinter der Website zu sehen, es gibt jedoch eine bessere und n\u00fctzlichere M\u00f6glichkeit, ihn anzuzeigen.<\/p>\n Kehren Sie zu Ihrer Homepage zur\u00fcck, klicken Sie mit der rechten Maustaste auf einen beliebigen Teil der Seite und w\u00e4hlen Sie diesmal die Option \u201eInspizieren“ (m\u00f6glicherweise \u201eElement pr\u00fcfen“). Dadurch werden die Entwicklertools Ihres Browsers ge\u00f6ffnet und ein Fenster wie dieses angezeigt:<\/p>\n Dies ist eine weitere M\u00f6glichkeit, denselben HTML-Code anzuzeigen, den Sie gerade beim Betrachten des Quellcodes gesehen haben. Der Unterschied besteht darin, dass wir jetzt eine Hierarchie haben, mit der wir navigieren und mit der wir interagieren k\u00f6nnen.<\/p>\n Wenn das alles seltsam und \u00fcberw\u00e4ltigend aussieht, ist das in Ordnung. Das Ziel hier ist nicht, die Entwicklertools Ihres Browsers zu beherrschen, sondern einen CSS-Selektor auf der Website zu finden.<\/p>\n In Ihren Entwicklertools gibt es eine linke und eine rechte Seite. Auf der linken Seite befindet sich eine Hierarchie des HTML-Codes, durch den wir navigieren k\u00f6nnen. Sie k\u00f6nnen die rechte Seite vollst\u00e4ndig ignorieren.<\/p>\n Wenn Sie jetzt mit der Maus \u00fcber die HTML-Elemente in den Entwicklertools fahren, werden Sie etwas wirklich Cooles bemerken. Jedes Element wird auf der Seite hervorgehoben, wenn Sie mit der Maus dar\u00fcber fahren.<\/p>\n So gelangen Sie ganz einfach zum gew\u00fcnschten Element. Tats\u00e4chlich m\u00fcssen Sie den HTML-Code nicht wirklich verstehen, um das gesuchte Element zu finden.<\/p>\n Es gibt zwei M\u00f6glichkeiten, um schnell direkt zu dem Element zu gelangen, das Sie anvisieren m\u00f6chten.<\/p>\n Nehmen wir an, ich muss zu einem Link in meiner Paginierung gelangen. Ich kann mit der rechten Maustaste irgendwo auf die Seite klicken und dann die Dropdown-Pfeile verwenden, um zum Link zu gelangen.<\/p>\n Jedes Mal, wenn ich auf einen Pfeil klicke, werden die darin enthaltenen Elemente angezeigt. Dies ist oft erforderlich, aber die n\u00e4chste Methode kann noch einfacher und schneller sein.<\/p>\n Manchmal k\u00f6nnen Sie genau das gew\u00fcnschte Element ausw\u00e4hlen. Klicken Sie dazu mit der rechten Maustaste auf das Element und die Entwicklertools \u00f6ffnen sich und markieren dieses Element bereits.<\/p>\n So navigieren Sie mit dieser schnelleren Methode zum gleichen Paginierungslink.<\/p>\n Nachdem Sie das gesuchte HTML-Element gefunden haben, kopieren Sie im letzten Schritt den CSS-Selektor<\/a>.<\/p>\n Im Screenshot unten sehen Sie, dass ich mit der Maus \u00fcber den Link von Seite 2 fahre.<\/p>\nAnzeigen des HTML-Codes Ihrer Website<\/h3>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181938-6170021ca44f7.png\")
<\/a><\/p>\nErhalten Sie eine bessere Ansicht des HTML<\/h3>\n
Navigieren Sie durch den HTML-Code<\/h3>\n
Methode 1: Navigieren Sie mit den Pfeilen<\/h4>\n
Methode 2: Klicken Sie mit der rechten Maustaste auf das Element<\/h4>\n
Holen Sie sich den CSS-Selektor<\/h3>\n
![\"So](\"https:\/\/themewp.inform.click\/wp-content\/uploads\/2021\/10\/post-181938-61700222c9d2d.png\")
<\/a><\/p>\n