第一种类型未按预期工作

Question

我试图用不同的方式设计一系列div中的第一个：

http://jsfiddle.net/tmyie/mA3j8/

.slideshow-img-ctnr {
    backround-color: red;
    width: 100px;
    height: 100px;
    border: 1px solid orange;
}
.slideshow-img-ctnr:first-of-type {
    border: 1px solid blue;
}

然而，第一个div的样式保持不变：

<div class="slideshow-style-ctnr">
    <div class="slideshow-nav">
        <div class="slide-right">&rarr;</div>
        <div class="slide-left">&larr;</div>
    </div>
    <!-- end slideshow-nav -->
    <div class="slideshow-img-ctnr">
        <img src="images/stock/fd-3" alt="">
    </div>
    <!-- end slideshow-img-ctnr -->
    <div class="slideshow-img-ctnr">
        <img src="images/stock/fd-3" alt="">
    </div>
    <!-- end slideshow-img-ctnr -->
    <div class="slideshow-img-ctnr">
        <img src="images/stock/fd-3" alt="">
    </div>
    <!-- end slideshow-img-ctnr -->
    <div class="slideshow-img-ctnr">
        <img src="images/stock/fd-3" alt="">
    </div>
    <!-- end slideshow-img-ctnr -->
    <div class="slideshow-img-ctnr">
        <img src="images/stock/fd-3" alt="">
    </div>
    <!-- end slideshow-img-ctnr -->
    <div class="slideshow-img-ctnr">
        <img src="images/stock/fd-3" alt="">
    </div>
    <!-- end slideshow-img-ctnr -->
</div>

Answer 1

正如注释中指出的那样，:first-of-type用于元素类型，而不是类。

你应该看看@BoltClock的这个极好的解释。

在这个特定的实例中，您可以使用以下方法：

此处更新的示例

.slideshow-style-ctnr :first-child + .slideshow-img-ctnr {
    border: 1px solid blue;
}

但是，如果.slideshow-img-ctnr不是.slideshow-style-ctnr的第一个子级的相邻同级，则此方法将失败。这里是一个例子，在那里它是行不通的。

尽管上面的内容可能适用于当前的标记，但最好使用以下方法：

这里的工作示例

.slideshow-img-ctnr {
    backround-color: red;       /* Styling shared by the elements */
    width: 100px;
    height: 100px;
    border:1px solid blue;      /* This will be overwritten */
}

用类.slideshow-img-ctnr覆盖前面所有同级元素的初始边框

.slideshow-img-ctnr ~ .slideshow-img-ctnr {
    border:1px solid orange;
}

Answer 2

.slideshow-img-ctnr:first-of-type的意思是:元素，它有类slideshow-img-ctnr，是它的父元素中的第一个类型。

因为带有slideshow-img-ctnr类的元素是div，所以:first-of-type检查它是否是父元素中的第一个div。它不是，所以元素与选择器不匹配。