CSS：最後一個子選擇器不起作用

我使用：最後一個子選擇器但它不起作用。例子：CSS：最後一個子選擇器不起作用

.last {background:blue;border-bottom:1px solid #cccccc;} 

.last:last-child {background:red;border-bottom:0px solid #cccccc;}

jsfiddle example

由於每個人的答案。

但是我另外有一個問題。 jsfiddle example 2

.big_box { 
 
    background:#eeeeee; 
 
    height:500px; 
 
} 
 

 
.last { 
 
    width:90%; 
 
    margin:auto; 
 
background: yellow; 
 
border-bottom: 1px solid #cccccc; 
 
} 
 
.last:last-child { 
 
    background: red; 
 
    border-bottom: 0px solid #cccccc; 
 
}

<div class="big_box"> 
 
    <div class="other">the other paragraph.</div> 
 
    <div class="last">The first paragraph.</div> 
 
    <div class="last">The second paragraph.</div> 
 
    <div class="last">The third paragraph.</div> 
 
    <div class="last">The fourth paragraph.</div> 
 
    <div class="other">the other paragraph.</div> 
 
    <div class="other">the other paragraph.</div> 
 
    <div class="other">the other paragraph.</div> 
 
</div>

來源

2017-08-02 user1821062

這僅僅是一個jsfiddle怪癖。將你的div包裝在一個父級div中，它工作正常。 –

另一個問題：https://jsfiddle.net/6dpodkkx/2/ – user1821062

這裏有一個帖子，你正在嘗試獲取https：// stackoverflow。com/questions/7298057/css-last-child-selector-select-last-element-of-specific-class-not-last-child-i我認爲這篇文章是重複的 – lucianov88

你需要做的是使用包裝元素。檢查出來，當你使用一個。

JSFiddle

<div> 
    <div class="last">The first paragraph.</div> 
    <div class="last">The second paragraph.</div> 
    <div class="last">The third paragraph.</div> 
    <div class="last">The fourth paragraph.</div> 
</div>

。

.last { 
background: yellow; 
border-bottom: 1px solid #cccccc; 
} 
.last:last-child { 
    background: red; 
    border-bottom: 0px solid #cccccc; 
}

來源

2017-08-02 03:47:19 jhpratt

感謝您的回答，但我還有其他問題。 – user1821062

https://jsfiddle.net/6dpodkkx/2/在這個例子中，這是行不通的。但我不知道爲什麼...... – user1821062

由於CSS解析器工作的複雜方式，AFAIK無法正常工作。不幸的是，沒有使用JS就沒有辦法。 – jhpratt

答案Q1：（befor更新您的文章）

<div class="last">The fourth paragraph.</div>是一個前的最後沒有過去，因爲在撥弄你的代碼是這樣（使用開發工具）：

<body> 
    <div class="last">The first paragraph.</div> 
    <div class="last">The second paragraph.</div> 
    <div class="last">The third paragraph.</div> 
    <div class="last">The fourth paragraph.</div> 
    <script>...</script> 
</body>

所以，最後一個孩子是<script>沒有<div class="last">The fourth paragraph.</div>。

用於修復我使用的：

.last:nth-last-child(2) { 
    background: red; 
    border-bottom: 0px solid #cccccc; 
}

Demo

還，您可以使用div:last-of-type：

Demo

三江源@Michael_B。

答案Q2：（更新後您的文章）：

您必須使用.last:nth-child(5) {：

Demo

來源

2017-08-02 03:47:39 Ehsan

@ user1821062看到更新的帖子！ – Ehsan

太棒了！這是答案。（它正在我的屏幕上開啓開發工具，面對着我！smh）..幹得好！ –

@Michael_B，不客氣！ – Ehsan

你應該試試這個

.last{ 
 
    background:yellow; 
 
    border-bottom:0px solid #cccccc; 
 
} 
 

 
.last div:last-child{ 
 
    background:red; 
 
    border-bottom:1px solid #cccccc; 
 
}

<div class="last"> 
 
    <div>The first paragraph.</div> 
 
    <div>The second paragraph.</div> 
 
    <div>The third paragraph.</div> 
 
    <div>The fourth paragraph.</div> 
 
</div>

來源

2017-08-02 04:07:40 Twinkle

請注意，這是*不是*相同的事情。在原始示例中，每行都有自己的邊框。 – jhpratt

在這種情況下，'last'類名是沒有意義的。 –

CSS：最後一個子選擇器不起作用

回答

相關問題