无法选择最后一个班级

Question

我试图选择我创建的这3个班级的最后一个孩子。我认为这是一个非常简单的解决方法。

我创建了一个剪辑来准确显示我遇到问题的地方。

＆＃13;

＆＃13;

.homeimage 				{ width: 30%; position: relative; display: inline-block; vertical-align: top; text-align: center; border: 1px solid blue; margin-right: 2%;}
.homeimage:last-class	{  margin-right: 0; border: 1px soild yellow; }

＆＃13;

<div class="homeimage">[image|2]<br />
&nbsp;
<h4>Product 1</h4>
</div>
<!-- homeimage -->

<div class="homeimage">[image|2]<br />
&nbsp;
<h4>Product 2</h4>
</div>
<!-- homeimage -->

<div class="homeimage">[image|2]<br />
&nbsp;
<h4>Product 3</h4>
</div>
<!-- homeimage -->

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是最后一类不存在。

我建议使用last-child来选择父节点的最后一个元素。

以下是使用last-child的代码段的修改版本。 请注意，我必须创建一个包装器div来触发最后一个子功能。

.homeimage 				{ width: 30%; position: relative; display: inline-block; vertical-align: top; text-align: center; border: 1px solid blue; margin-right: 2%;}
.homeimage:last-child	{  margin-right: 0; border: 1px solid yellow; }

    <div>
    <div class="homeimage">[image|2]<br />
    &nbsp;
    <h4>Product 1</h4>
    </div>
    <!-- homeimage -->

    <div class="homeimage">[image|2]<br />
    &nbsp;
    <h4>Product 2</h4>
    </div>
    <!-- homeimage -->

    <div class="homeimage">[image|2]<br />
    &nbsp;
    <h4>Product 3</h4>
    </div>
    <!-- homeimage -->
    </div>

Answer 2

也许你可以使用这样的解决方法：

＆＃13;

＆＃13;

.homeimage 				{ width: 30%; position: relative; display: inline-block; vertical-align: top; text-align: center; border: 1px solid blue; margin-right: 2%;}
div.homeimage:last-of-type	{  margin-right: 0; border: 1px solid yellow; }

＆＃13;

<div class="homeimage">[image|2]<br />
&nbsp;
<h4>Product 1</h4>
</div>
<!-- homeimage -->

<div class="homeimage">[image|2]<br />
&nbsp;
<h4>Product 2</h4>
</div>
<!-- homeimage -->

<div class="homeimage">[image|2]<br />
&nbsp;
<h4>Product 3</h4>
</div>
<!-- homeimage -->
<section>More content that does not mess up the :last-of-type selector</section>

＆＃13;

＆＃13;

＆＃13;

然后确保没有其他类型的div将成为最后一个孩子。您可以使用其他类似div的标记，例如<section>或<article>作为替代。

Answer 3

请尝试此代码nth-child

＆＃13;

＆＃13;

.homeimage{ width: 30%; position: relative; display: inline-block; vertical-align: top; text-align: center; border: 1px solid blue; margin-right: 2%;}
.homeimage:nth-child(3){  margin-right: 0; border: 1px solid yellow; }

＆＃13;

<div class="homeimage">[image|2]<br />
&nbsp;
<h4>Product 1</h4>
</div>
<!-- homeimage -->

<div class="homeimage">[image|2]<br />
&nbsp;
<h4>Product 2</h4>
</div>
<!-- homeimage -->

<div class="homeimage">[image|2]<br />
&nbsp;
<h4>Product 3</h4>
</div>
<!-- homeimage -->

＆＃13;

＆＃13;

＆＃13;