ホームページ > ウェブフロントエンド > CSSチュートリアル > ## CSS パスの精度と読みやすさを改善するにはどうすればよいでしょうか?

## CSS パスの精度と読みやすさを改善するにはどうすればよいでしょうか?

Patricia Arquette
リリース: 2024-10-25 11:14:30
オリジナル
895 人が閲覧しました

## How Can We Improve the Accuracy and Readability of CSS Paths?

ドキュメント要素からの 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 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート