首頁 > web前端 > css教學 > 主體

以下是一些適合文章內容的基於問題的標題: 關注核心差異: * 為什麼 `.class:last-of-type` 不像 `.class:last-of-class` 那樣運作? * 真實行為是什麼

DDD
發布: 2024-10-26 02:18:27
原創
229 人瀏覽過

Here are some question-based titles that fit the article content:

Focusing on the core difference:

* Why Doesn't `.class:last-of-type` Work Like `.class:last-of-class`?
* What's the Real Behavior of the `.class:last-of-type` Selector?
* Understanding

理解.class:last-of-type 的行為

面臨的問題是選擇器.class:last-of- type 的功能與.class:last-of-class 選擇器不同。相反,它專門針對容器元素中其類型的最後一個同級元素。

了解 .last-of-type

根據 W3C 規範, .last-of-type 偽類表示屬於其類型的最後一個同級元素。這意味著:

  1. 它檢查 HTML 中每個容器元素內的元素清單。
  2. 它標識每個列表中的最後一個元素。
  3. 它驗證最後一個元素與指定的元素類型相符(例如 p)。

應用規則

在提供的範例中,選擇器 .visible:last使用-of-type。這表示樣式將僅套用於:

  • 屬於 p 標籤的元素。
  • 具有 .visible 類別的元素。
  • 屬於最後一個 p 標籤在其容器元素中具有 .visible 類別。

解決問題

由於只有前兩個p 元素具有.visible 類,第三個p 元素將不滿足.visible:last-of- type 選擇器的條件。因此,其顯示屬性將不會被設定為 block。

要達到所需的結果,請考慮以下選項:

  • 確保最終p 標籤也有 .visible 類別。
  • 如果無法使用 JavaScript,請探索替代 CSS 方法來選擇具有特定類別的最後一個 p 元素。

以上是以下是一些適合文章內容的基於問題的標題: 關注核心差異: * 為什麼 `.class:last-of-type` 不像 `.class:last-of-class` 那樣運作? * 真實行為是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板