## CSS 경로의 정확성과 가독성을 어떻게 향상시킬 수 있나요?

문서 요소의 CSS 경로: 향상된 접근 방식

CSS 경로 생성에 대한 현재 접근 방식은 정확성과 가독성을 위해 개선될 수 있습니다.

원래 기능 :

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

다음과 같은 CSS 경로를 생성합니다.

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

정확성을 위해 경로에는 ID가 없는 요소에 대해 nth-child()가 포함되어야 합니다.

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

다음 향상된 기능은 이러한 문제를 해결합니다.

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

이 향상된 기능을 통해 특정 요소에 대한 CSS 경로가 더 정확하고 읽기 쉬워졌습니다.

위 내용은 ## CSS 경로의 정확성과 가독성을 어떻게 향상시킬 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!