Question

我遇到了第一个类型选择器未被识别的问题。我正在布置一个图像网格，我想要第一个图像（一个'块'类或'tallblock'类）左边没有任何填充，并且行中的最后一个图像没有在右边填充。为了实现这一点，我使用的是第一类和最后一类的选择器。它适用于所有行，除了具有“tallblock”元素的行。

我有以下标记：

<div class="row pure-g">
    <div class="tallblock pure-u-1-3">
        {{content}}
    </div>

    <div class="block pure-u-2-3">
        {{content}}
    </div>

    <div class="block pure-u-1-3">
        {{content}}
    </div>

    <div class="block pure-u-1-3">
        {{content}}
    </div>
</div>

以下css：

block{
    padding: 0px 4px;

    img{
        max-height: 310px;
    }

    &:first-of-type{
        padding: 0px 4px 0px 0px;
    }

    &:last-of-type{
        padding: 0px 0px 0px 4px;
    }
}

.tallblock{
    padding: 0rem 4px;

    img{
    max-height: 628px;
    }

    &:first-of-type{
        padding: 0px 4px 0px 0px;
    }

    &:last-of-type{
        padding: 0px 0px 0px 4px;
    }
}

由于某种原因，第一个类型选择器没有选择第一个“block”元素（在“tallblock”之后）。 HALP？

Answer 1

尝试使用:first-child和:last-child代替：

.tallblock{
    padding: 0rem 4px;

    img{
    max-height: 628px;
    }

    &:first-child{
        padding: 0px 4px 0px 0px;
    }

    &:last-child{
        padding: 0px 0px 0px 4px;
    }
}

css first-of-type的问题

1 个答案: