嘿所有,我有这个代码:
<div class="sideBox"> <h3>Course Summary</h3> <div class="block"> <h4>Course ID</h4> <p>MS00000001</p> <h4>Start Date</h4> <p>14<sup>th</sup> September 2011</p> <h4>End Date</h4> <p>12<sup>th</sup> June 2012</p> <h4>Cost</h4> <p>£1500.95</p> </div> </div>
现在我试图改变每个第二个P标签的颜色
.sideBox .block p:nth-child(odd) { color: red !important; }
我尝试使用它,但它没有工作:/什么都没有改变颜色,我在这里做错了什么?
解决方法
正如Matt Ball所说,elements are 1-indexed而不是0索引.因此,你的p元素甚至是孩子,而不是奇怪的,所以它们根本不会匹配.另一个问题是:nth-child()会考虑该父级下的每个兄弟,无论类型如何,因此如果使用p:nth-child(偶数),则每个p都会被选中.
使用p:nth-of-type(偶数)代替非p兄弟(在这种情况下,h4元素)从选择中排除:
.sideBox .block p:nth-of-type(even) { color: red !important; }