css-selectors - 是否可以在没有列表的情况下使用 CSS 选择器？

Question

我有以下课程：

.at-icon.at-icon {}

我需要为使用这些类的每个元素（社交网络图标）设置样式，如下所示：

.at-icon.at-icon:nth-child(even) { fill: red !important }
.at-icon.at-icon:nth-child(odd) { fill: blue !important }

所以一个元素是红色的，另一个是蓝色的。它们目前看起来都是这样的：

截屏

我使用该类的 HTML 是：复制链接

问题是：我<li>在DOM. 不幸的是，这是我可以在这里发布的所有内容来重现我的问题，因为我使用的是第三方工具，这个 addthis.com

它是一个免费工具，您可以使用它进行测试。我不能将它用于测试，因为这意味着使用我的帐户资源，并且我可能会违反他们的 TOS。

标签： css-selectorshtml-lists

Answer 1

我认为您正在寻找的是后代组合器。

你可以做的是找到这些<svg>元素的最近的父母，它们是彼此的兄弟姐妹，从我从你的屏幕截图中可以看出，这些可能是应用<a>了类的元素at-share-btn。

然后，使用这些元素来识别偶数和奇数实例。

.at-share-btn:nth-child(even) {
}

.at-share-btn:nth-child(odd) {
}

之后，使用后代组合器，定位<svg>这些元素中的<a>元素。

.at-share-btn:nth-child(even) .at-icon {
    fill: red !important;
}

.at-share-btn:nth-child(odd) .at-icon {
    fill: blue !important;
}