Question

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

.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

.slideshow-img-ctnr:first-of-type表示：具有类slideshow-img-ctnr的元素，它是其父级中第一个类型。

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

Answer 2

正如评论中所指出的，:first-of-type用于元素类型，而不是类。

你应该看看this excellent explanation by @BoltClock。

在此特定实例中，可以使用以下内容：

UPDATED EXAMPLE HERE

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

但是，如果.slideshow-img-ctnr不是.slideshow-style-ctnr的第一个孩子的相邻前一个兄弟，则此方法将失败。这是an example，不会工作。

虽然上面的可以使用当前标记，但最好只使用以下代码：

WORKING EXAMPLE HERE

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

第一类不按预期工作

2 个答案: