問題描述
為什么這不起作用?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>事實上，我的 <p> 元素都不可見.如果我在選擇器中刪除對 .visible 的引用，這確實會顯示 div 中的最后一個 <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.
當然，我只能始終保留一個 .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 內的最后一個元素?我不想為此使用 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 并認為它可以作為 :last-of-class 選擇器，而它專門表示僅元素.不幸的是，類的最后一個實例沒有選擇器.
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 偽類表示一個元素，它是其類型的最后一個兄弟元素.
The
:last-of-typepseudo-class represents an element that is the last sibling of its type.
您將 p.visible:last-of-type 作為選擇器，它執行以下操作:
You have p.visible:last-of-type as your selector, which does the following:
- 查看 HTML 中每個包含元素中的每個元素列表(例如 1 個或多個元素；沒有兄弟姐妹的子元素仍然可以應用
:last-of-type)李> - 查找該列表中的最后一個元素
- 檢查它是否是
<p>元素 - 檢查它是否有類
.visible.
簡而言之，您的選擇器只會將其樣式應用于 <p> 類 .visible 上.在您的標記中，只有前兩個 <p> 元素具有該類；第三個沒有.
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.
這里有一個不同風格的演示來說明:
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>根據你的最終目標，
如何選擇帶有 .visible 類的 div 中的最后一個元素?我不想為此使用 JavaScript.
How can I select the last element inside the div WITH the class .visible? I do NOT want to use JavaScript for this.
最簡單和最高效的方法是反轉您嘗試應用樣式的方式；而不是試圖隱藏三個 div 中的兩個，其中一個要隱藏的 div 有一個類，另一個要隱藏的 div 沒有類，并且要顯示的 div 與要隱藏的一個 div 共享相同的類其中 也 有一個類(看到?這很令人困惑)，請執行以下操作:
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:
- 僅將類添加到較小的元素(或元素組).
- 將元素的默認樣式設置為您不希望類實現的樣式.
- 將類的樣式設置為您想要實現的樣式.
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>正如您從這個演示中看到的那樣，您的 HTML 和 CSS 不僅更簡單，而且還具有僅使用類選擇器而不是 *-of-type 偽選擇器的好處，這將使頁面加載更快(請參閱下面的更多內容).
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).
為什么沒有后跟或父選擇器?通過在頁面上動態更改一個類名稱，這可能會降低許多網頁的速度.
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 實施工作時，提到了一些避免這些實現的原因:
Dave Hyatt, while working on the WebKit implementation in 2008, mentioned some reasons why these implementations are avoided:
使用父選擇器很容易意外導致文件范圍內的卑躬屈膝.人們可以并且將會濫用這個選擇器.支持它就是給人們很多繩子來吊死自己與.
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.
關于 CSS3 選擇器的可悲事實是，它們真的不應該如果您關心頁面性能，請完全使用.裝飾你的標記具有類和 ids 并僅在那些上進行匹配，同時避免所有使用兄弟、后代和子選擇器實際上會產生一個頁面在所有瀏覽器中的性能都顯著提高.
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.
這篇關于為什么 .class:last-of-type 不能按我的預期工作?的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！