<div?class="outside">
????<div?class="box">
????????<div?class="inside"></div>
????????<div?class="line"></div>
????</div>
????<div?class="anotherLine"></div>
????<div?class="box">
????????<div?class="inside"></div>
????????<div?class="line"></div>
????</div>
????<div?class="anotherLine"></div>
????<div?class="box">
????????<div?class="inside"></div>
????????<div?class="line"></div>
????</div>
????<div?class="anotherLine"></div>
????<div?class="box">
????????<div?class="inside"></div>
????????<div?class="line"></div>
????</div>
????<div?class="anotherLine"></div>
</div>.outside{
????width:?100%;
????padding-bottom:?20px;
????padding-top:?20px;
????background:?grey;
}
.inside{
????width:?100px;
????height:?100px;
????background:?red;
}
.box{
????margin-left:?50px;
????position:?relative;
????display:?inline-block;
}
.line{
????width:?80px;
????height:?2px;
????background:?white;
????margin-top:?5px;
}
.anotherLine{
????width:?2px;
????height:?100px;
????background:?blue;
????display:?inline-block;
}
.outside?.box:nth-of-type(2)?.inside{
????background:?black;
}結(jié)果我想把第二個紅色的塊變成黑色的，結(jié)果失敗了。但是如果把上面的HTML修改一下<div?class="outside">
????<div?class="box">
????????<div?class="inside"></div>
????????<div?class="line"></div>
????</div>
????<!--?<div?class="anotherLine"></div>?-->
????<div?class="box">
????????<div?class="inside"></div>
????????<div?class="line"></div>
????</div>
????<!--?<div?class="anotherLine"></div>?-->
????<div?class="box">
????????<div?class="inside"></div>
????????<div?class="line"></div>
????</div>
????<!--?<div?class="anotherLine"></div>?-->
????<div?class="box">
????????<div?class="inside"></div>
????????<div?class="line"></div>
????</div>
????<!--?<div?class="anotherLine"></div>?-->
</div>這樣就成功了。請問這是為什么？:nth-of-type能使用的場合只能是被選中元素的父類中的元素全部相同嗎？如果不按照第二種方式，保留藍色的豎線，我要怎么修改樣式表？
:nth-of-type無效
慕先生4543078
2017-06-26 16:34:25
