为什么css选择器：nth-child无法选中我要的元素呢？

Question

在定位标签的时候，我使用了nth-child选择器。但是无法选中我要的部分。烦请各位帮忙解惑，谢谢。
如下是我想要定位的li列表，包裹在class="summary"的div里面。

    <div class="summary">
    <img src="images/circle.png" alt="circle.png">
    <p>ABC123</p>
    <ul>
        <li><p>110<br><span>收藏</span></p></li>
        <li><p>313<br><span>粉丝</span></p></li>
    </ul>
    </div>

如下是定义的选择器：

.summary ul li:nth-child(1){
    top: 100px;
    left: 65px;
}
.summary ul li:nth-child(2){
    top:100px;
    left: 95px;
}

但是并没有生效，li元素还是父元素的初始位置。如图

想要实现的样式（图片格式）：http://7xrp04.com1.z0.glb.clouddn.com/ta...
详细的代码地址：https://github.com/louislee0229/louisIFE...
demo：http://louislee0229.github.io/louisIFE/t...

Answer 1

首先要明白一点，问题的重点不在nth-child的伪类属性上，而是出在父级ul元素上；
作如下改动：

ul{
    position: absolute;
    top: 100px;
    width: 100%;
}
ul li{
    position: absolute;
    top: 0;
}
ul li:nth-child(1){
   left: 50px;
}
ul li:nth-child(2){
   left: 150px;
}

效果如下：