## Comment pouvons-nous améliorer la précision et la lisibilité des chemins CSS ?

Chemin CSS à partir de l'élément de document : approche améliorée

L'approche actuelle de génération de chemins CSS pourrait être améliorée pour plus de précision et de lisibilité.

La fonction d'origine :

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(" > ");
}

produit des chemins CSS comme :

html > body > div#div-id > div.site > div.clearfix > ul.choices > li

Pour plus de précision, le chemin doit inclure nth-child() pour les éléments sans ID :

html > body > div#div-id > div.site:nth-child(1) > div.clearfix > ul.choices > li:nth-child(5)

La fonction améliorée suivante résout ces problèmes :

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(" > ");
 }

Avec cette amélioration, le chemin CSS de l'élément donné sera plus précis et lisible.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!