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

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 /格/一个

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

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

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

> UTILS.cssPath(node)

有关实现示例， 请参阅css_path.js

Answer 4

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

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

生成的选择器示例：

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

Answer 5

如果元素是div表或body..etc中的第一个子元素，则可以使用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 个解决方案

解决方案1
54 2011-01-03 20:46:12

解决方案2
19 已采纳 2011-01-03 20:56:32

解决方案3
16 2015-03-28 14:22:28

解决方案4
2 2018-02-21 06:33:08

解决方案5
0 2011-01-03 20:38:01

解决方案6
0 2019-08-15 01:16:23

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

问题描述

6 个解决方案

解决方案1 54 2011-01-03 20:46:12

解决方案2 19 已采纳 2011-01-03 20:56:32

解决方案3 16 2015-03-28 14:22:28

解决方案4 2 2018-02-21 06:33:08

解决方案5 0 2011-01-03 20:38:01

解决方案6 0 2019-08-15 01:16:23

解决方案1
54 2011-01-03 20:46:12

解决方案2
19 已采纳 2011-01-03 20:56:32

解决方案3
16 2015-03-28 14:22:28

解决方案4
2 2018-02-21 06:33:08

解决方案5
0 2011-01-03 20:38:01

解决方案6
0 2019-08-15 01:16:23