Google Chrome的开发者工具会在工具栏底部显示所选元素的CSS路径(或大部分内容)。在Firebug中,您可以右键单击CSS路径中的任何选择器,并抓取到该元素为止的CSS路径。Google Chrome是否有这个功能?如果没有内置支持,有哪些可用工具?
Google Chrome的开发者工具会在工具栏底部显示所选元素的CSS路径(或大部分内容)。在Firebug中,您可以右键单击CSS路径中的任何选择器,并抓取到该元素为止的CSS路径。Google Chrome是否有这个功能?如果没有内置支持,有哪些可用工具?
Chrome已更新此选项
在最近的Chrome更新中,此选项已从
(在Elements窗口中右键单击元素) >复制CSS路径
更改为:
(在Elements窗口中右键单击元素) >复制 >复制选择器
您可以在主源窗口上右键单击元素并选择“复制CSS路径”。当我必须处理无法重新编码的页面时,这项功能是一个救星。
getCSSPath = (node)->
parts = []
while node.parentElement
str = node.tagName
if node.id
str += "##{node.id}"
parts.unshift str
break
siblingsArr = Array.prototype.slice.call(node.parentElement.childNodes)
ind = siblingsArr.filter((n)-> n.attributes?).indexOf(node)
parts.unshift str + ":nth-child(#{ind + 1})"
node = node.parentElement
parts.join ' > '
在每个节点上使用“:nth-child”,因此如果您还想获取类名,需要修改它。