聊聊 CSS 选择器

聊聊 CSS 选择器

firefox 开发者工具有一个很酷的功能：在查看器中右键单击某元素，选择“复制唯一选择器”，刻意复制定位至该元素的唯一选择器。这跟 CSS 选择器的功能恰好相反，可以视作 document.querySelector 的逆运算。

这个功能 firefox 怎么实现的呢？ grep 源码，追踪到 browser/devtools/inspector/inspector-panel.js 文件中下列代码：

/**
 * Copy a unique selector of the selected Node to the clipboard.
 */
function InspectorPanel_copyUniqueSelector() {
    if (!this.selection.isNode()) {
        return;
    }

    let toCopy = CssLogic.findCssSelector(this.selection.node);
    if (toCopy) {
        clipboardHelper.copyString(toCopy);
    }
}

根据 CssLogic 又跟踪到 toolkit/devtools/styleinspector/css-logic.js 文件：

/**
 * Find a unique CSS selector for a given element
 * @returns a string such that ele.ownerDocument.querySelector(reply) === ele
 * and ele.ownerDocument.querySelectorAll(reply).length === 1
 */
CssLogic.findCssSelector = function CssLogic_findCssSelector(ele) {
  ele = LayoutHelpers.getRootBindingParent(ele);
  var document = ele.ownerDocument;
  if (!document || !document.contains(ele)) {
    throw new Error('findCssSelector received element not inside document');
  }

  // document.querySelectorAll("#id") returns multiple if elements share an ID
  if (ele.id && document.querySelectorAll('#' + CSS.escape(ele.id)).length === 1) {
    return '#' + CSS.escape(ele.id);
  }

  // Inherently unique by tag name
  var tagName = ele.localName;
  if (tagName === 'html') {
    return 'html';
  }
  if (tagName === 'head') {
    return 'head';
  }
  if (tagName === 'body') {
    return 'body';
  }

  // We might be able to find a unique class name
  var selector, index, matches;
  if (ele.classList.length > 0) {
    for (var i = 0; i < ele.classList.length; i++) {
      // Is this className unique by itself?
      selector = '.' + CSS.escape(ele.classList.item(i));
      matches = document.querySelectorAll(selector);
      if (matches.length === 1) {
        return selector;
      }
      // Maybe it's unique with a tag name?
      selector = tagName + selector;
      matches = document.querySelectorAll(selector);
      if (matches.length === 1) {
        return selector;
      }
      // Maybe it's unique using a tag name and nth-child
      index = positionInNodeList(ele, ele.parentNode.children) + 1;
      selector = selector + ':nth-child(' + index + ')';
      matches = document.querySelectorAll(selector);
      if (matches.length === 1) {
        return selector;
      }
    }
  }

  // Not unique enough yet.  As long as it's not a child of the document,
  // continue recursing up until it is unique enough.
  if (ele.parentNode !== document) {
    index = positionInNodeList(ele, ele.parentNode.children) + 1;
    selector = CssLogic_findCssSelector(ele.parentNode) + ' > ' +
            tagName + ':nth-child(' + index + ')';
  }

  return selector;
};