CSS踩坑---nth-child()选择器

先贴上一个小技巧，在html页面中写好css后，在F2调试器里面如图：

用选择器1选中2元素，然后会在4里面看到对应的样式，这个样式不是我自己写的，我也不知道，我怀疑是系统生成的，我2这里使用的  text-align: right;   将其靠右，但是距离右边还是太大，而  margin-XXX  属性已经不能再往右了，然后在F12里面将4的属性复制粘贴在了我的代码里面，稍加修改然后效果达到了，我是后端被迫做前端，有的地方说的不严谨，但是效果确实是达到了，也不知道还有没有更好的办法。

这里主要是用到了  nth-child()   属性，

.houseList li span:nth-child(even) input {
        width: 100%;
    }

 

这里的意思是 先选择类：houseList ，里面有个  li  标签 ，li  里面有个 span 标签，因为span标签有两个，所以用   nth-child(even)   选择第二个，span 里面有个 input 标签，对这里进行属性设置。

 

具体 nth-child()  使用请见

https://www.w3school.com.cn/cssref/selector_nth-child.asp

或自行百度了解。