如何选择在h1元素之后放置的第n个元素

Question

我需要选择放置在h1元素之后的第4个div元素，我认为我的方法不是专业的方法，在CSS中是否有类似这样的指定选择器？请注意，我必须在不向div添加id或class属性的情况下执行此操作。

h1+div+div+div+div{
background-color:red; 
}

<h1>css</h1>

<div>just some text here,</div><hr>
<div>just some text here,</div><hr>
<div>just some text here,</div><hr>
<div>just some text here,</div><hr>
<div>just some text here,</div><hr>

Answer 1

您可以使用nth-of-type和subsequent sibling combinator选择它，以选择div之后的第四个h1，如下所示：

h1~div:nth-of-type(4) {
    background-color:red;
}

css中的~被称为后续同级组合器，它允许您选择第二个元素类型，其中第一个和第二个元素类型共享父级，并且第一个元素在文档中的第二个元素类型之前。

---

jsFiddle： https://jsfiddle.net/AndrewL64/crq43gs5/

---

[如果您确定在hr之间没有任何divs标签或其他元素，则可以使用nth-child代替，但是必须使用5而不是4，因为〜会计数h1标签太。它看起来像这样：

h1~div:nth-child(5) {
    background-color:red;
}

---

jsFiddle： https://jsfiddle.net/AndrewL64/crq43gs5/1/

Answer 2

专业方式：

向该div添加一个类，然后按该类进行选择

 .forthDiv{
       background-color:red; 
 }

 <div class="forthDiv">sometext</div>

非专业的，有时是必需的方式：

 div:nth-of-type(4){
 background-color:red; 
 }