У меня есть своя древовидная система. То, что я пытаюсь сделать, - дать всем родителям преимущество, за исключением первого. Это мой HTML:
<div id="someDivID">
<div class="theBody">
<div class="someContainer">
<div id="someItem" class="someItemClass">
Test
</div>
</div>
<div class="someContainer">
<div id="someItem2" class="someItemClass">
Test2
</div>
</div>
</div>
</div>
И мой CSS:
#someDivID
{
width: 400px;
}
#someItem,
#someItem2
{
border: 1px solid #000;
padding: 1px;
margin-bottom: 2px;
clear: both;
overflow: auto;
}
.someItemClass
{
background-color: #0077FF;
}
.someItemClass:not(:first-of-type)
{
margin-top: 50px;
}
Теперь мой .someContainer
имеет цвет фона, но второй .someContainer
не имеет верхнего поля. Если я удалю :first-of-type
, он будет работать. :first-child
тоже не работает.
Здесь мои jsfiddles:
С first-of-type
: http://jsfiddle.net/JoshB1997/zsu2o3cg/
С first-child
: http://jsfiddle.net/JoshB1997/zsu2o3cg/1/