無法選擇最後一類

-1

我正在嘗試選擇我創建的這3個類的最後一個子項。我認爲這是一個非常簡單的修復。無法選擇最後一類

我創建了一個剪切來準確顯示我遇到問題的位置。

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

<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 -->

來源

2015-12-04 Nick

沒有'最後class'僞類CSS。你應該看看「最後一個孩子」或「最後一個類型」。 – Harry

什麼不工作？我看到一個錯字'soild'而不是'solid'，也許它只是因爲輸入錯誤而不能應用css。 – Sablefoste

的問題是，最後一類不存在。

我會推薦使用最後一個孩子來選擇父節點的最後一個元素。

以下是使用最後一個孩子的片段的修改版本。請注意，我不得不創建一個包裝div來觸發最後一個孩子的功能。

.homeimage \t \t \t \t { width: 30%; position: relative; display: inline-block; vertical-align: top; text-align: center; border: 1px solid blue; margin-right: 2%;} 
 
.homeimage:last-child \t { 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>

來源

2015-12-04 05:33:08 IRCBot

謝謝你的幫助。週五下午我真的無法思考。 – Nick

也許你可以使用一種解決方法是這樣的：

.homeimage \t \t \t \t { 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 \t { margin-right: 0; border: 1px solid yellow; }

<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>

然後確保沒有其他種類的股利將是最後一個孩子。您可以使用其他div-like標籤，如<section>或<article>作爲替代品。

來源

2015-12-04 05:34:49 AVAVT

請嘗試本準則第n個孩子

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

<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 -->

來源

2015-12-04 05:36:32

無法選擇最後一類

回答

相關問題