【css3】【待解决】选择器nth-child(3n)适用的场景及遇到的问题

想实现的效果：选择3的倍数的元素，给与不同的样式

情况1

    <ul id="testUl">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
//样式如下
<style>
#testUl li {
  font-size: 50px;
  float: left;
  margin: 0px 20px;
}
#testUl li:nth-child(3n) {
  color: blue;
}
</style>

效果实现：

情况2:

    <div id="testDiv">
      <div style="width: 300px; height: 300px">
        <div style="width: 250px; height: 250px">
          <div style="width: 200px; height: 200px">
            <div style="width: 150px; height: 150px">
              <div style="width: 100px; height: 100px">
                <div style="width: 50px; height: 50px"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

//样式如下
<style>
#testDiv div {
  border: 1px solid;
}
#testDiv div:nth-child(3n) {
  border-color: red;
}
</style>

效果未实现：

第2种情况，未实现想要的效果，有懂的大佬，请指教。