問題描述

為什么這不起作用?http://jsfiddle.net/84C5W/1/

p{
    display: none;
}
p.visible:last-of-type {
    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>

事實(shí)上，我的 <p> 元素都不可見.如果我在選擇器中刪除對(duì) .visible 的引用，這確實(shí)會(huì)顯示 div 中的最后一個(gè) <p>，但這不是我想要的.

In fact, none of my <p> elements are visible. If I remove the reference to .visible in my selector, this does show the last <p> in the div, but this is not what I want.

當(dāng)然，我只能始終保留一個(gè) .visible，但這是用于顯示.js 的演示文稿，我無法控制 JavaScript.

Of course I could only keep one .visible at all times, but this is for a reveal.js presentation and I do not have control over the JavaScript.

如何使用 .visible 類選擇 div 內(nèi)的最后一個(gè)元素?我不想為此使用 JavaScript.

How can I select the last element inside the div WITH the class .visible? I do NOT want to use JavaScript for this.

推薦答案

您的問題是您正在閱讀 :last-of-type 并認(rèn)為它可以作為 :last-of-class 選擇器，而它專門表示僅元素.不幸的是，類的最后一個(gè)實(shí)例沒有選擇器.

Your issue is that you're reading :last-of-type and thinking it works as a :last-of-class selector, when instead it specifically means elements only. There is no selector for the last instance of a class, unfortunately.

來自 W3C:

:last-of-type 偽類表示一個(gè)元素，它是其類型的最后一個(gè)兄弟元素.

The :last-of-type pseudo-class represents an element that is the last sibling of its type.

您將 p.visible:last-of-type 作為選擇器，它執(zhí)行以下操作:

You have p.visible:last-of-type as your selector, which does the following:

1. 查看 HTML 中每個(gè)包含元素中的每個(gè)元素列表(例如 1 個(gè)或多個(gè)元素；沒有兄弟姐妹的子元素仍然可以應(yīng)用 :last-of-type)李>
2. 查找該列表中的最后一個(gè)元素
3. 檢查它是否是 <p> 元素
4. 檢查它是否有類 .visible.

簡(jiǎn)而言之，您的選擇器只會(huì)將其樣式應(yīng)用于 <p> 類 .visible 上.在您的標(biāo)記中，只有前兩個(gè) <p> 元素具有該類；第三個(gè)沒有.

In short, your selector will only apply its styles to a <p> that also has the class .visible on it. In your markup, only the first two <p> elements have that class; the third does not.

這里有一個(gè)不同風(fēng)格的演示來說明:

Here's a demo of different styles to illustrate:

p:last-of-type {
  /* this will be applied in the third paragraph because the pseudo-selector checks for nodes only */
  color: green;
}
p.visible:last-of-type {
  /* this does not get applied, because you are using the pseudo-selector with a specific class in addition to the node type. */
  color: red;
}

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

根據(jù)你的最終目標(biāo)，

如何選擇帶有 .visible 類的 div 中的最后一個(gè)元素?我不想為此使用 JavaScript.

How can I select the last element inside the div WITH the class .visible? I do NOT want to use JavaScript for this.

最簡(jiǎn)單和最高效的方法是反轉(zhuǎn)您嘗試應(yīng)用樣式的方式；而不是試圖隱藏三個(gè) div 中的兩個(gè)，其中一個(gè)要隱藏的 div 有一個(gè)類，另一個(gè)要隱藏的 div 沒有類，并且要顯示的 div 與要隱藏的一個(gè) div 共享相同的類其中 也 有一個(gè)類(看到?這很令人困惑)，請(qǐng)執(zhí)行以下操作:

The simplest and most performant way is to invert the way you're trying to apply the styles; instead of trying to hide two out of three divs, where one of the divs to hide has a class and the other div to hide has no class, and the div you want to show shares the same class as the one div you want to hide which also has a class (see? that's pretty confusing), do the following:

• 僅將類添加到較小的元素(或元素組).
• 將元素的默認(rèn)樣式設(shè)置為您不希望類實(shí)現(xiàn)的樣式.
• 將類的樣式設(shè)置為您想要實(shí)現(xiàn)的樣式.

p {
    display: none;
}
.visible {
    display: block;
}

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

正如您從這個(gè)演示中看到的那樣，您的 HTML 和 CSS 不僅更簡(jiǎn)單，而且還具有僅使用類選擇器而不是 *-of-type 偽選擇器的好處，這將使頁(yè)面加載更快(請(qǐng)參閱下面的更多內(nèi)容).

As you can see from this demo, not only are your HTML and CSS simpler, but this also has the benefit of using only a class selector rather than a *-of-type pseudo-selector, which will make the page load faster (see more on that below).

為什么沒有后跟或父選擇器?通過在頁(yè)面上動(dòng)態(tài)更改一個(gè)類名稱，這可能會(huì)降低許多網(wǎng)頁(yè)的速度.

Why is there no followed by or parent selector? This could potentially bog down the speed of a lot of webpages by changing just one class name dynamically on the page.

Dave Hyatt，在 2008 年從事 WebKit 實(shí)施工作時(shí)，提到了一些避免這些實(shí)現(xiàn)的原因:

Dave Hyatt, while working on the WebKit implementation in 2008, mentioned some reasons why these implementations are avoided:

使用父選擇器很容易意外導(dǎo)致文件范圍內(nèi)的卑躬屈膝.人們可以并且將會(huì)濫用這個(gè)選擇器.支持它就是給人們很多繩子來吊死自己與.

With parent selectors it becomes extremely easy to accidentally cause a document-wide grovel. People can and will misuse this selector. Supporting it is giving people a whole lot of rope to hang themselves with.

關(guān)于 CSS3 選擇器的可悲事實(shí)是，它們真的不應(yīng)該如果您關(guān)心頁(yè)面性能，請(qǐng)完全使用.裝飾你的標(biāo)記具有類和 ids 并僅在那些上進(jìn)行匹配，同時(shí)避免所有使用兄弟、后代和子選擇器實(shí)際上會(huì)產(chǎn)生一個(gè)頁(yè)面在所有瀏覽器中的性能都顯著提高.

The sad truth about CSS3 selectors is that they really shouldn’t be used at all if you care about page performance. Decorating your markup with classes and ids and matching purely on those while avoiding all uses of sibling, descendant and child selectors will actually make a page perform significantly better in all browsers.

這篇關(guān)于為什么 .class:last-of-type 不能按我的預(yù)期工作?的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！