Question

我正在尝试通过JavaScript / CSS修改页面（很像Stylish或Greasemonkey）。这是一个非常复杂的页面（我没有构建，或者无法修改预渲染），这使得构建CSS选择器很难做到（手动查看文档结构）。我怎样才能做到这一点？

Answer 1

function fullPath(el){
  var names = [];
  while (el.parentNode){
    if (el.id){
      names.unshift('#'+el.id);
      break;
    }else{
      if (el==el.ownerDocument.documentElement) names.unshift(el.tagName);
      else{
        for (var c=1,e=el;e.previousElementSibling;e=e.previousElementSibling,c++);
        names.unshift(el.tagName+":nth-child("+c+")");
      }
      el=el.parentNode;
    }
  }
  return names.join(" > ");
}

console.log(  fullPath( $('input')[0] ) );
// "#search > DIV:nth-child(1) > INPUT:nth-child(1)"

这似乎是你要求的~~，但你可能会发现这并不能保证只能唯一地识别一个元素。（对于上面的示例，所有兄弟输入也将匹配。）~~

修改：更改了代码，使用nth-child代替CSS类来正确消除单个孩子的歧义。

Answer 2

使用安装了FireBug的FireFox。

右键单击任何元素
选择“检查元素”
右键单击HTML树中的元素
选择“复制XPath”或“复制CSS路径”

此答案的永久链接输出（XPath）：

/ HTML /体/格[4] / DIV [2] / DIV [2] / DIV [2] / DIV [3] /表/ tbody的/ TR / TD [2] /表/ tbody的/ TR / TD / DIV /一

CSS路径：

html body.question-page div.container div＃content div＃mainbar div＃answers div＃answer-4588287.answer table tbody tr td table.fw tbody tr td.vt div.post-menu a

但关于这个评论：

我的最终目的是创建一个CSS 对象的选择器......

如果这是你的意图，可能有一种更简单的方式通过JavaScript：

var uniquePrefix = 'isThisUniqueEnough_';
var counterIndex = 0;
function addCssToElement(elem, cssText){
    var domId;
    if(elem.id)domId=elem.id;
    else{
        domId = uniquePrefix + (++counterIndex);
        elem.id = domId;
    }
    document.styleSheets[0].insertRule("#"+domId+"{"+cssText+"}");
}

对于不同的浏览器，最后一行可能需要以不同的方式实现。没试过。

Answer 3

我发现我实际上可以使用this code from chrome devtools source来解决这个问题，而不需要那么多修改。

在将WebInspector.DOMPresentationUtils中的相关方法添加到新命名空间并修复一些差异后，我只需将其称为：

> UTILS.cssPath(node)

对于实施示例 see css_path.js

Answer 4

检查此CSS选择器生成器库@medv/finder

生成最短的选择器
每页唯一选择器
稳定而强大的选择器
2.9 kB gzip和缩小尺寸

生成的选择器示例：

.blog > article:nth-child(3) .add-comment

Answer 5

如果元素是div表或body中的第一个子元素，则可以使用css first-child伪类。等等

你可以使用jquery的第n个child（）函数。

http://api.jquery.com/nth-child-selector/

来自jquery.com的

示例

<!DOCTYPE html>
<html>
<head>
  <style>

  div { float:left; }
  span { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-1.4.4.js"></script>
</head>
<body>
  <div><ul>
    <li>John</li>
    <li>Karl</li>
    <li>Brandon</li>

  </ul></div>
  <div><ul>
    <li>Sam</li>
  </ul></div>

  <div><ul>
    <li>Glen</li>
    <li>Tane</li>
    <li>Ralph</li>

    <li>David</li>
  </ul></div>
<script>$("ul li:nth-child(2)").append("<span> - 2nd!</span>");</script>

</body>
</html>

如果我正确地理解了这个问题，我的2美分。

Answer 6

function getCssSelector(el)
{
    names = [];
    do {
        index = 0;
        var cursorElement = el;
        while (cursorElement !== null)
        {
            ++index;
            cursorElement = cursorElement.previousElementSibling;
        };
        names.unshift(el.tagName + ":nth-child(" + index + ")");
        el = el.parentElement;
    } while (el !== null);

    return names.join(" > ");
}

获取元素的CSS选择器（当它没有id时）

6 个答案: