使用CSS通过类名获取第二个元素，无需使用JS

Question

我希望所有标题中的titletitanic都能以20像素的高度显示。我可以通过应用以下CSS规则来实现此目的：

h1[title="titanic"] {font-size:20px;}

现在我想让具有该类的第二个标题变成红色。如果每个标题都有相同的父元素（因此在同一个 div 中），我可以使用以下代码实现：

h1[title="titanic"]:nth-of-child {color:red;}

然而，当我的标题不在同一个父元素中时，我不知道如何选择第二个标题。在以下示例中，我想知道需要什么CSS规则才能将第二个标题标为红色：

<h1 title="titanic">heading one</h1>
<span><h1 title="titanic">heading two</h1></span>

- Nicky Smits

---

提醒一下...多个H1元素对您的网站SEO是有危险的。 - Roko C. Buljan

我明白。这是不好的做法。H1元素只是例子。它们也可以很容易地成为SPAN元素;). 这是为了解决我一直遇到的更大的问题。 - Nicky Smits

在您提供的HTML代码中，您缺少一些更多的示例（以及您提到的类）来展示所有所需的情况。 - Roko C. Buljan

我刚刚注意到您在不久之前问了一个非常类似的问题：http://stackoverflow.com/questions/22901978/css-select-second-instance-regardless-of-its-relative-position 除了标记上的细微差别，您为什么要单独发布这个问题呢？除了已经在那里的评论中解释过的“不可能”的答案外，它几乎是相同的问题。 - BoltClock

没错，我删掉了它。我提问的方式不太容易回答。所以我再试一次。 ;) - Nicky Smits

Answer 1

CSS没有一种可以在整个文档中选择第n个元素的方法。您将需要依靠结构来确定是否选择第二个h1。

例如，您只能在span之前出现第一个h1时选择它，如下所示（忽略在您的示例中将h1放在span中的适当性...）：

h1[title="titanic"] + span > h1[title="titanic"]

如果您有一组这些元素，请查看顶级

元素和元素是否都共享同一个父元素。如果是，则可以使用:nth-child(2)来确保不匹配任何其他。

h1[title="titanic"] + span:nth-child(2) > h1[title="titanic"]

如果您完全无法对文档结构做出任何假设，那么您就没戏了。

- BoltClock

---

清除。但这仅适用于依赖于类、ID或标签名称的CSS规则。使用CSS，我可以使用更高级的选择器，如[href]，这对我的问题更合适。我希望纯粹使用CSS完成它。 - Nicky Smits

@Nicky Smits: 这些高级选择器是CSS的一部分，因此相同的原则适用。如果您更新您的问题并给出一个更准确的示例，我有机会向您展示如何完成，但正如我在我的答案中已经说明的那样，仅依靠CSS还不足够- 您需要查看您的标记。 - BoltClock

这行代码不起作用，因为querySelectorAll返回的是一个静态nodeList，所以我无法直接设置任何值。而且除此之外，它又使用了JS，而我希望使用CSS。 - Nicky Smits

如果你不知道解决方案，你不必告诉我，因为我也不知道。尽管我喜欢帮助，但这些并不是解决问题的答案。 - Nicky Smits

不，我的意思是目前没有纯CSS的解决方案。不知道问题是否有解决方案和确切知道没有解决方案是有区别的，因此我的回答仍然有效。你可以自行选择是否接受我的回答，毕竟这是你的问题，但我相信其他人会感激一个明确的答案。 - BoltClock

Answer 2

唯一的方法是使用JS。演示

• 获取文档中所有选择器，
• 对所需的索引位置应用类或设置样式。

 var titanic = document.querySelectorAll('[title="titanic"]');
 titanic[1].style.color = 'red';

- Roko C. Buljan

---

现在我想让具有该类的第二个标题变成红色。如果每个标题都有相同的父元素（因此在同一个div中），我可以使用以下代码完成：[code] - bjb568

不错的例子。只有一个小问题。如果我有8个标题都叫“泰坦尼克号”，其中4个会被标成红色。 - Nicky Smits

在你的例子中，我看到了两个红色标题。 - Nicky Smits

如果我表达不清楚，我很抱歉。我想让第二个标题的标题为“泰坦尼克号”变为红色。不管网页上有多少个标题，只要符合条件的第二个标题就可以了。 - Nicky Smits

如果你只想让第二个标题变成红色，我的回答难道不能帮到你吗？它只会针对第二个titanic“title”，并停止忽略其他所有标题，无论它们放置在哪里。 - Hélio C