Html CSS不使用JS按类名获取第二个元素

我希望我所有的标题都有

标题

泰坦尼克号，高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>

标题一
标题二

CSS无法选择文档范围内的第n个元素。您必须依靠结构来确定是否选择第二个

h1

例如，只有当

span

之前的第一个

h1

出现时，您才能选择它，就像这样（忽略在

span

中使用

h1

的适当性，如您的示例所示…）：

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

h1

元素和

span

元素是否共享同一父元素。如果他们这样做，您可以使用第n个子项（2）确保您不匹配任何其他

span

s：

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

---

如果你不能对你的文档结构做出任何假设，那你就倒霉了。

唯一的办法就是使用JS

• 在文档中获取所有选择器
• 将类或样式设置为所需的索引

---

只是想警告你。。。多个H1元素对您的网站是危险的SEOI了解。这是个坏习惯。H1元素只是示例。它们也可以很容易地成为SPAN元素；）。这是为了解决我一直遇到的一个更大的问题。在你给我们的HTML代码中，你缺少了更多的示例（以及你提到的类）来展示所有需要的案例。我刚刚注意到，在这之前不久，你问了一个非常类似的问题：你为什么要单独发布这个？除了标记上的细微差别之外，这几乎是同一个问题（与评论中已经解释的“不可能”的答案相同）。没错，我删除了它。我问这个问题的方式很难回答。汉斯：我又试了一次清楚的但这只适用于依赖于类、id或标记名的css规则。有了css，我可以使用更高级的选择器，比如[href]，这更适合我的问题。我希望它完全用CSS来完成。@Nicky Smits：这些高级选择器是CSS的一部分，所以同样的原则也适用。如果你用一个更准确的例子来更新你的问题，我有机会向你展示它是如何完成的，但是正如我在回答中所说的，仅仅CSS并不能让你走得很远-你需要看看你的标记。我更改了标题。我需要它来处理CSS，而不是JS。如果你不知道解决方案，你不必告诉我，因为我也不知道。但即使我喜欢这些帮助，这些都不是解决问题的答案。不，我是说没有纯粹的CSS解决方案。不知道问题是否有解决方案和知道没有解决方案是有区别的，因此我的答案是正确的，因为这毕竟是你的问题，但我相信还有其他人会希望有一个明确的答案。“现在我希望该类的第二个标题是红色的。如果每个标题都有相同的父标题（因此在同一个div中），我可以用这个：[代码]”这是一个很好的例子。只有一个小问题。如果我有8个标题是《泰坦尼克号》，其中4个标题会被涂成红色。@NickySmits这会有帮助吗<代码>[title=“titanic”]：第n个孩子（1）+*>[title=“titanic”]：第n个孩子（1）{color:red；}@RokoC.Buljan Nice addition。只是还不够精确。如果我有一个标题二，那么第二个标题也应该是红色的。在你的例子中，我看到了两个红色标题。

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

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