找出元素的第n个子元素

I am editing the CSS of a static framework for an e-commerce store. I can't edit a lot of it but I've been using nth-child to target certain elements in the CSS. The problem is that a lot of the dynamically generated divs, tables and spans don't have class or ID selectors. The framework is built on tables so there's a lot of CSS selectors like this:

我正在编辑一个电子商务商店的静态框架的CSS。我不能编辑很多，但我一直在使用nth-child来针对CSS中的某些元素。问题是，许多动态生成的div、表和span没有类或ID选择器。框架是建立在表格上的，所以有很多CSS选择器像这样:

.sample_CSS_class table:nth-child(5) table

This is where a table that's contained within the fifth table under the div with the class "sample_CSS_class" is targeted. This can take a lot of time though. I have to go into the Google Chrome Inspector (or Firebug) and expand the source code and then count down from there. With so much code, I can make mistakes and it also just takes a while.

这是一个包含在div下的第五个表中的表的目标，类为“sample_CSS_class”。这可能要花很多时间。我必须进入谷歌Chrome检查器(或Firebug)，展开源代码，然后从那里开始倒数。有了这么多代码，我可能会犯错误，而且这也需要一段时间。

I was wondering if anyone knows an efficient way to find out the nth-child number of an element with something like Firebug or Google Chrome Inspector (or any other tool that's out there). Thanks!

我想知道是否有人知道一种有效的方法来找出一个元素的第n个子元素号，比如Firebug或者谷歌Chrome Inspector(或者任何其他工具)。谢谢!

1 个解决方案

#1

With Chrome, you can use the Copy XPath context menu entry to sort of do it:

使用Chrome，您可以使用Copy XPath上下文菜单项来进行排序:

It'll give you an XPath selector that looks like this:

它会给你一个这样的XPath选择器:

//*[@id="sidebar"]/div[4]/div/div[13]

div[13] is like div:nth-child(13). It'd be really nice if Chrome had a Copy CSS option, but for some reason it doesn't. Maybe someone will make an extension.

div[13]就像div:nth-child(13)。如果Chrome有一个拷贝CSS选项那就太好了，但是出于某种原因它没有。也许有人会做延期。