css - 当第一个和第二个按钮之间有另一个元素时，如何使用 nth-child 正确选择第二个按钮？

Question

我正在尝试使用

.myDivName button:nth-child(2) {
  background-color: red;
}

在 <div class="myDivName"> 中选择我的第二个按钮但它不起作用。我的代码是 -

<div class="myDivName">
  <button>
    1
  </button>
  <input type="text">
  <button>
    2
  </button>
</div>

但我发现如果我删除了 <input>在这两者之间，那么第 n 个 child 就可以工作。

如何使用 nth-child(2) 正确选择此按钮？如果不能使用nth-child，最好的方法是什么？

谢谢!

fiddle - https://jsfiddle.net/e6au4hot/9/

Answer 1

使用nth-of-type相反:

.hi > button:nth-of-type(2) {
  background-color: red;
}

jsFiddle example

你关心的是元素的类型，而不是层次结构中的位置