css - 第 n 个和第 m 个兄弟元素的选择器？

Question

使用 CSS3，我想准确地获取第一个和第四个同级元素 - 而且只有这两个。找不到有效的 :nth-of-type(an+b) 选择器，因为我不是在every a-th 元素之后，而是只在寻找非常两个元素。

:nth-of-type(1), // :first-of-type wouldn't work either,
:nth-of-type(4){
  ...
}

不会起作用，因为后一个选择器会覆盖第一个选择器。似乎有一个最后 nth-of-type 选择器获胜的方法。

如何使用 CSS3 选择第一个和第四个兄弟元素？

Answer 1

使用:nth-of-type时需要类型或类，如div:nth-of-type或.block:nth-of -类型。

div:nth-of-type(1),
div:nth-of-type(4){
  color: lime;
}

.block:nth-of-type(1),
.block:nth-of-type(4){
  color: red;
}

/*  for styling purpose  */
div + span { margin-top: 20px; }
.block { display: block; }

<div>Hey there div</div>
<div>Hey there div</div>
<div>Hey there div</div>
<div>Hey there div</div>
<div>Hey there div</div>

<span class="block">Hey there div</span>
<span class="block">Hey there div</span>
<span class="block">Hey there div</span>
<span class="block">Hey there div</span>
<span class="block">Hey there div</span>