爲什麼.class：最後一個類型不起作用？

爲什麼這不起作用？ http://jsfiddle.net/84C5W/1/爲什麼.class：最後一個類型不起作用？

<style> 
    p{ 
    display : none; 
    } 
    p.visible:last-of-type { 
    display : block; 
    } 
</style> 
<div> 
    <p class="visible">This should be hidden</p> 
    <p class="visible">This should be displayed</p> 
    <p class="">This should be hidden</p> 
</div>

其實，不關我的<p>的是可見的。如果我在樣式表中刪除對「.visible」的引用，這確實顯示div中的最後一個<p>，但這不是我想要的。

當然，我一直只能保留一個「.visible」，但這是爲了揭示.js演示文稿，並且我無法控制javascript。只有樣式表...

編輯：好吧，很明顯.class：最後一個類型不起作用。正如@Justus Romijn所說，最後一類僞類僅用於選擇元素（在我看來這是極大的限制，並且將這個特定的僞類置於一個或多或少的無用狀態）。

無論如何，我想在這一點上重申我的問題：如何選擇div中的最後一個元素與類「.visible」？我不想爲此使用Javascript。

來源

2012-11-25 Øystein Amundsen

確定您的腳本沒有添加內聯樣式來隱藏和顯示元素？ –

一般來說（對於其他人尋求幫助）'：hr-child'可能會更容易 - http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_last-child –

我做了一些測試，但last-of-type選擇僅適用於節點選擇，而不是類名。

HTML：

<p class="visible">First paragraph.</p> 
<p class="visible">Second paragraph.</p> 
<p>Third paragraph.</p>

CSS：

p:last-of-type{ 
    /* this will be applied in the third paragraph bacause the pseudo-selector is applied to nodes only */ 
    font-weight: bold; 
} 
p.visible:last-of-type { 
    /* this does not get applied, because you are using the pseudo-selector with a class. */ 
    display: block; 
}

從W3C：

的：最後的方式僞類表示是最後的元件它的類型的兄弟在其父元素的子元素列表中。

因爲它必須是兄弟姐妹，所以它會忽略類名，可能是因爲那樣可以將它與其他元素混合在一起。

爲什麼沒有其次或家長選擇？ 這可能會通過在頁面上動態更改一個類名來潛在地鎖定大量網頁。大量使用CSS3選擇器在瀏覽器中已經很沉重，不推薦使用。

戴夫·海厄特，在WebKit的執行工作在2008年，mentioned some reasons why these implementations are avoided而：

與父母選擇就變得非常容易不小心造成廣泛的文檔卑躬屈膝。人們可以並且會濫用這個選擇器。支持它給人們一大堆繩子掛在自己與。

關於CSS3選擇器的可悲事實是，如果你關心頁面性能，他們真的不應該使用。使用類和ID整理標記，並純粹在那些上匹配，同時避免所有使用兄弟，後代和子選擇器實際上使得頁面在所有瀏覽器中的性能顯着提高。

來源

2012-11-25 19:37:49

如果出現這種情況，那麼在編寫：last-of-type僞類的規範時，有人會有錯誤的想法。 –

@ØysteinAmundsen你仍然可以將我的答案標記爲已接受嗎？ 2年後？ :) –

當然。我不知道爲什麼我沒有做到這一點。 :-) –

問題是:last-of-type只匹配元素選擇器。在你的例子中，你試圖匹配一個class選擇器。這就是爲什麼它不起作用。

一個例子：http://dabblet.com/gist/4144885

來源

2012-11-25 19:32:48

調整示例：http：// dabblet.com/gist/786c06e963eed66b700e441b08edf540 –

在我的情況下，我犯了一個錯誤。

p.visible : last-of-type (x) 
p.visible:last-of-type (o)

正是II做

來源

2014-11-06 09:32:19 fitjimong

以供將來參考，這將在CSS級別4所覆蓋：在寫作的時刻https://www.w3.org/TR/selectors4/#the-nth-last-match-pseudo

瀏覽器的支持，是不存在的：http://css4-selectors.com/selector/css4/structural-pseudo-class/

準備就緒時，應該是解決方案：

p { 
 
    display : none; 
 
} 
 
p.visible:nth-last-match(0) { 
 
    display : block; 
 
}

<div> 
 
    <p class="visible">This should be hidden</p> 
 
    <p class="visible">This should be displayed</p> 
 
    <p class="">This should be hidden</p> 
 
</div>

來源

2017-05-31 10:12:21

定位倒數第二個標記。

.visible:nth-last-of-type(2);

來源

2017-07-16 04:26:10 Thisismint

我知道，但那不是我想要的。線索是元素可以是動態的，我不想綁定到我的CSS中的特定元素位置。 –

好的，但我的答案是針對其他遇到類似困境的人;不添加後續的節點/標籤。 – Thisismint

爲什麼.class：最後一個類型不起作用？

回答

相關問題