CSS:第一种类型不起作用

Question

我想:第一种类型会影响我的情况下的第一种类型

<div class="box">I am the first box in div.center...</div>

如果我删除 <div class="top">CSS工作并添加绿色顶部边框.

但是我需要<div class="top">,那么为什么它不起作用<div class="top">呢？

小提琴

<div class="main-wrap">
    <div class="center">
        <h3>Lorem Ipsum</h3>
        <div class="top">XXX XXX XXXX</div>
        <div class="box">I am the first box in div.center. Why no top border?</div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</div>

.box {
    width:100%;
    height:30px;
    margin:10px 0;
    background-color:orange;
}

.main-wrap .center div.box:first-of-type {
    border-top:4px solid green;
}
.box {
    position:relative;
    border-bottom:4px solid green;
}

Answer 1

当你在div.top那里时,它成为div其父级中的第一个元素.:first-of-type只看元素的类型; div.box:first-of-type真的意味着div:first-of-type只有当它有类时才选择.box,而不是第一个div.box.

要达到第一个div.box,请使用相邻的兄弟选择器:

.main-wrap .center div.top + div.box {
    border-top:4px solid green;
}