按祖父母的父母班级选择一个css3元素答案

【问题标题】：Select a css3 element by grandparent's parent's class按祖父母的父母班级选择一个css3元素
【发布时间】：2017-11-20 08:59:47
【问题描述】：

我在我的网站中实现了多个范围滑块，因为这是实时生成的代码，我需要通过它们的父类父类选择一些元素。

这是时间轴类的代码，是我可以自己设置的最后一个代码，我需要能够在不更改其他滑块的情况下编辑.irs-line-right

【问题讨论】：

添加代码而不是屏幕截图。您还想创建选择器以使用 JS/jquery 动态添加样式或使用 css 添加样式？如果使用 css，那么只需添加空间层次结构，您就可以访问孙子或其子项。（选择第 2 个或第 3 个孩子等使用 nth-child 伪选择器）w3schools.com/cssref/css_selectors.asp

标签： javascript html css css-selectors

【解决方案1】：

在您的问题中，您表示要通过父元素访问元素。我不明白为什么这是必要的，但这肯定是可能的。可以通过js改变元素样式、属性等。但是，如果您只需要使用“irs-line-right”类更改跨度的样式，最好简单地使用 css。我将展示如何在 css 和 javascript 中执行此操作。

CSS 示例

在 css 中你可以改变 'irs-line-right' 的样式通过引用“时间线”div（并且没有其他 id 或类）如下：

https://jsfiddle.net/2t3w0826/

.timeline > div:nth-of-type(2) > span > span > span > span:nth-of-type(3)
{
  background-color: red;
}

Javascript 示例

https://jsfiddle.net/8qceLgw8/

var array_of_all_timelines = document.getElementsByClassName("timeline");
for(var loop=0; loop < array_of_all_timelines.length; loop++)
{
  var element_irs_line_right = array_of_all_timelines[loop].children[1].children[0].children[0].children[0].children[2];
  element_irs_line_right.style.backgroundColor = "red";
};

【讨论】：