Question

请考虑以下代码段：

.test input.one ~ div:nth-of-type(2) {
  background-color: red;
}

.test input.two ~ div:nth-of-type(2) {
  background-color: blue;
}

<form class="test">
  <input class="one" />
  <div></div>
  <input class="two" />
  <div style="height: 50px;"></div>
  <div style="height: 50px;"></div>
</form>

我希望发生的是第一个<div style="height: 50px;"></div>将是红色，第二个将是蓝色。相反，nth-of-type(2)选择器两次都选择了第一个<div style="height: 50px;"></div>。

我认为.test input.two ~ div:nth-of-type(2)将从<input class="two" />开始，向下计数2个<div>标签，然后降落在第二个标签上？

这是怎么回事？

Answer 1

nth-of-type()“根据给定类型的元素根据它们在一组同级兄弟中的位置来匹配”。您的代码正在选择<div>之前的input.two ，并且也是父元素中第二个<div>兄弟姐妹。

在您的情况下，您可以考虑使用adjacent sibling combinator。在下面，我选择紧随<div>之后的.one（红色）和紧随<div>之后<div>的{{1}}（蓝色）

.two

.one + div {
  background-color: red;
}

.two + div + div {
  background-color: blue;
}

只是为了好玩，这是一个通过将元素分组到单独的父容器中来帮助可视化<form class="test"> <input class="one" value="one"> <div>A</div> <input class="two" value="two"> <div>B</div> <div>C</div> </form>的示例。

nth-of-type

.one ~ div:nth-of-type(1) {
  background-color: red;
}

.two ~ div:nth-of-type(2) {
  background-color: blue;
}

CSS常规同级和nth-of-type选择器-奇怪的行为？

1 个答案: