Der aktuelle Ansatz zum Generieren von CSS-Pfaden könnte im Hinblick auf Genauigkeit und Lesbarkeit verbessert werden.
Die ursprüngliche Funktion :
var cssPath = function (el) { var path = []; while ( (el.nodeName.toLowerCase() != 'html') && (el = el.parentNode) && path.unshift(el.nodeName.toLowerCase() + (el.id ? '#' + el.id : '') + (el.className ? '.' + el.className.replace(/\s+/g, ".") : '')) ); return path.join(" > "); }
erzeugt CSS-Pfade wie:
html > body > div#div-id > div.site > div.clearfix > ul.choices > li
Aus Gründen der Genauigkeit sollte der Pfad nth-child() für Elemente ohne IDs enthalten:
html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)
Die folgende erweiterte Funktion behebt diese Probleme:
var cssPath = function(el) { if (!(el instanceof Element)) return; var path = []; while (el.nodeType === Node.ELEMENT_NODE) { var selector = el.nodeName.toLowerCase(); if (el.id) { selector += '#' + el.id; path.unshift(selector); break; } else { var sib = el, nth = 1; while (sib = sib.previousElementSibling) { if (sib.nodeName.toLowerCase() == selector) nth++; } if (nth != 1) selector += ":nth-of-type("+nth+")"; } path.unshift(selector); el = el.parentNode; } return path.join(" > "); }
Mit dieser Verbesserung wird der CSS-Pfad für das angegebene Element präziser und lesbarer.
Das obige ist der detaillierte Inhalt von## Wie können wir die Genauigkeit und Lesbarkeit von CSS-Pfaden verbessern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!