0

我正在为客户开发一个网站，她安装了 Visual Composer。对于帖子网格，我需要为每个帖子标题分配不同的颜色。我的方法是找到 grid-item 容器并将 :nth-child 附加到它，然后将其定向到我真正想要应用不同颜色的自定义 css 类。

示例代码，基于实际代码：

.vc_grid-item:first-child > ... > vc_gitem-zone-a > ... > .custom-post-title {
    background-color: red;
}
.vc_grid-item:nth-child(2) > ... > vc_gitem-zone-a > ... > .custom-post-title {
    background-color: green;
}
.vc_grid-item:nth-child(3) > ... > vc_gitem-zone-a > ... > .custom-post-title {
    background-color: blue;
}

奇怪的是，这种技术对于帖子的特色图像上的悬停文本效果非常有效。

我尝试了 nth-of-type，但运气不佳。它可以工作，但只解析第一个或第二个类型，对所有三个 div 应用相同的颜色。

我已经尝试了我能想到的所有路径排列，但没有一个有效。试图通过 Visual Composer 生成的无尽 div 追踪路径实际上是不可能的。使用代码检查器（Google Chrome），我发现了动态生成的类、作为内联样式注入的类，以及呈现在 HTML 中但在检查器中看不到的类。经过几个小时的仔细规划不同的“类路径”来完成这项工作，我完全沮丧地放弃了。

有趣的是，Visual Composer 文档清楚地表明，通过其 UI 添加自定义 css 类，自定义样式变得简单明了。我的经验是，这是真的——如果你想对 post 网格中的所有 div 应用相同的颜色。不过，请尝试独立自定义每个网格项目，这是一场完全不同的球赛……可能无法获胜。

关于如何在不诉诸某种 hacky JavaScript 黑魔法的情况下使其工作的任何想法？

4

2 回答 2

0

child 指向表中的 tbody

您必须在选择器中使用 tbody 来将孩子指向 tr

.vc_grid-item tbody :nth-child(1){
background-color: green;
}
.vc_grid-item tbody :nth-child(2){
background-color: blue;
}
于 2016-12-06T11:23:21.437 回答
0

如果你想用 class 来定位一系列元素.vc_grid-item，你需要的是:nth-of-class......而且它不存在。

如果您说明元素的类型，则可以使用:nth-of-type：

div:nth-of-type(3).vc_grid-item > ... > .custom-post-title {background-color: blue;}

NB:nth-match当 CSS4到来时，这种事情会容易得多。

然后，在这种情况下，您将能够使用：

:nth-match(3 of '.vc_grid-item')

进一步阅读： http ://www.w3.org/TR/selectors4/#selected-child-index

于 2016-12-06T10:52:51.607 回答