我正在尝试通过JavaScript/CSS修改页面(就像Stylish或Greasemonkey一样)。这是一个非常复杂的页面(我没有构建它,也无法在预渲染之前修改),这使得构建CSS选择器变得困难(手动查看文档结构)。我该如何实现这个目标?
我正在尝试通过JavaScript/CSS修改页面(就像Stylish或Greasemonkey一样)。这是一个非常复杂的页面(我没有构建它,也无法在预渲染之前修改),这使得构建CSS选择器变得困难(手动查看文档结构)。我该如何实现这个目标?
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类来正确消除单个子项的歧义。
nth-child()
选择器的固有问题。我会使用特异性来派生一个选择器。 - thdoan我发现实际上可以使用来自Chrome devtools源代码的这段代码来解决这个问题,而不需要太多修改。
在将相关方法从WebInspector.DOMPresentationUtils
添加到新命名空间并修复一些差异后,我只需这样调用它:
> UTILS.cssPath(node)
实现示例请参见css_path.js
使用已安装FireBug的FireFox浏览器。
输出此答案的永久链接(XPath):
/html/body/div[4]/div[2]/div[2]/div[2]/div[3]/table/tbody/tr/td[2]/table/tbody/tr/td/div/a
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+"}");
}
最后一行可能需要针对不同的浏览器进行不同的实现。未经测试。
请查看此CSS选择器生成库@medv/finder
生成的选择器示例:
.blog > article:nth-child(3) .add-comment
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(" > ");
}
如果元素是 div 表格或 body 中的第一个子元素,您可以使用 css 的 first-child 伪类。
您可以使用 jQuery 的 nth 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>
如果我正确理解了问题,这是我的一点建议。