html - :first-child selector doesn't work

Question

我想给第一个 <article class="type-reviews"> 增加宽度元素，所以我试过了:

/*this is what I had previously and works right*/
#show-reviews .type-reviews {
    display: inline-block; 
    width: 31%;  
    margin-right: 2% !important;
    padding: 0px; 
    vertical-align: text-top;
}

新规则:

/*this is what I've added to change the first element width*/
#show-reviews .type-reviews:first-child {
    width: 50% !important;  
}

但新的 CSS 并没有改变任何东西。即使使用 Firebug 进行检查，该规则似乎也不适用于第一个元素。

接下来是 HTML:

...
<div id="show-reviews">
    <div id="banner-lateral">...</div>
    <article id="post-300" class="post-300 type-reviews status-publish hentry has-post-thumbnail">...</article>
    <article id="post-222" class="post-222 type-reviews status-publish hentry has-post-thumbnail">...</article>
    ...
</div>

Answer 1

这是因为您的 .type-reviews 不是第一个 child ，您的 div 元素是。但是，它是第一个 article 元素，因此您可以使用 :first-of-type:

#show-reviews .type-reviews:first-of-type {
    width: 50%;  
}

此外，您真的不需要在这里使用 !important，因为您的新选择器比旧选择器具有更高的特异性。

供引用:

<div id="show-reviews">
    <div ...>...</div>            <!-- First child, first of type (div) -->
    <article ...>...</article>    <!-- Second child, first of type (article) -->
    ...
</div>