CSS通过className获得第二个元素，而不使用JS

Question

我想要title 泰坦尼克号的所有标题为20px高。我可以通过应用此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>

Answer 1

CSS没有办法在文档范围内选择第n个元素。您将不得不依赖该结构来确定是否选择第二个h1。

例如，您只有在h1之前的第一个span出现时才能选择它，就像这样（忽略h1中span的适当性在你的例子中......）：

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

或者，如果您有一组这些，请查看顶级h1元素和span元素是否共享同一个父元素。如果他们这样做，您可以使用span:nth-child(2)来确保您不匹配任何其他span：

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

如果您根本无法对文档结构进行任何假设，那么您就不幸了。

Answer 2

唯一的方法是使用JS。的 DEMO

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

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