我正在尝试通过JavaScript/CSS修改页面(很像Stylish或Greasemonkey).这是一个非常复杂的页面(我没有构建,或者无法修改预渲染),这使得构建CSS选择器很难做到(手动查看文档结构).我怎样才能做到这一点？
有没有办法获取 DOM 对象并推断出一个 CSS 选择器，该选择器可用于稍后查找该元素。
例子：
<ul class="items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<script type="text/javascript">
var second = $('.items li:eq(1)');
console.log(get_css_selector(second));
</script>
凡get_css_selector将返回类似的东西.items li:eq(1)，或者至少一个字符串，将工作选择要素。
如果有一种方法可以基于以下内容生成 CSS 选择器，那就更好了：
<script type="text/javascript">
var third = document.getElementsByTagName('li')[2];
console.log(get_css_selector(third));
</script>
假设您获得了一个节点node，并且您必须提供由选择器给出的所有直接子节点Direct。直接子代的选择器是：
childParent > directChild
但是，以下失败并在控制台中出现错误：
document.body.querySelectorAll(">div")
SyntaxError: '>div' is not a valid selector
我有一个函数需要在选择直接子节点上执行某些操作，但我不确定如何处理这个问题。当然，除了使用for循环并用我自己的代码分析子级，完全放弃选择器。
下面的代码不起作用。是否可以对其进行更改以实现预期目的？
function doWithDirectChildren(parentNode) {
// does not work, the selector is invalid
const children = parentNode.querySelector(">.shouldBeAffected");
for(const direct of children) {
// do something with the direct child
}
}
我要求的是解决方案，而不是解决方法。