按自定义数据/ attirbute选择第二个元素

时间:2017-05-31 10:32:15

标签: javascript css css-selectors

行。我试图通过CSS选择器获取javascript中的元素。要通过自定义元素获取一个我知道的元素[custom-name =" Literal name"]'。 好。这有效。但现在我需要得到第二个。我的意思是我有一些具有确切自定义名称的元素,并且对于每个人我需要应用不同的规则(只有5个)。

如何选择其他?可以通过CSS选择它们吗?

PS:它们位于随机位置,所以第一个可能是5个元素,如果我刷新页面,它可以是容器内的10个元素。

PS2:不,在我的情况下,我无法更改HTML :(。我唯一可以改变的代码是CSS和javascript。

感谢您的阅读! :d

1 个答案:

答案 0 :(得分:1)

假设您无法通过另一个非顺序依赖因子选择特定的因子,您可以使用伪选择器:nth-child 。在您的情况下,完整的CSS选择器将为element[custom-name="Literal name"]:nth-child(2) - 将2替换为您认为合适的任何其他数字。一般来说,只选择文档中的位置并不是最好的选择,因为位置可能比属性更频繁地改变 - 但无论如何,这是一个纯粹的CSS解决方案!

请注意,这仅适用于您正在使用的元素是公共父元素的子元素 - 如果您正在寻找与该查询匹配的第二个元素通常在整个文档中,使用CSS选择器无法做到这一点。相反,您可以确保为每个元素添加唯一类或其他差异属性,或者只是使用querySelectorAll - 在这种情况下,您可以获得第二个元素使用这个小片段:document.querySelectorAll('element[custom-name="Literal name"]')[1]