Question

我认为：第一个类型会影响第一个类型，在我的情况下是

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

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

但我需要<div class="top">，那么如果<div class="top">存在，它为什么不起作用？

FIDDLE

<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;
}

Answer 2

CSS声明过度限定。如果这个设计模式在整个网站中重复出现，那么使用下面的兄弟选择器就会更好更清洁：

.top + .box {
    border-top: 4px solid green;
}

浏览器从右到左查看声明，因此将扫描所有.box类，然后扫描与.box关联的.top类。通过添加其他类，在应用声明样式之前，浏览器将被强制重新扫描2次。

CSS：第一种类型不起作用

2 个答案: