首頁 > web前端 > css教學 > CSS 可以選擇沒有特定類別或屬性的元素嗎?

CSS 可以選擇沒有特定類別或屬性的元素嗎?

Susan Sarandon
發布: 2025-01-03 22:04:43
原創
926 人瀏覽過

Can CSS Select Elements Without a Specific Class or Attribute?

可以寫 CSS 來選擇缺少類別或屬性的元素嗎?

當希望選擇不具備類別或屬性的元素時,就會出現此問題特定的類別或屬性。例如,考慮下面的HTML:

<html class="printable">
    <body class="printable">
        <h1 class="printable">Example</h1>
        <nav>
            <!-- Some menu links... -->
        </nav>
        <a href="javascript:void(0)" onclick="javascript:self.print()">Print me!</a>
        <p class="printable">
            This page is super interresting and you should print it!
        </p>
    </body>
</html>
登入後複製

在這種情況下,我們的目標是選擇沒有「printable」類別的元素,即nava

解:

傳統上,可以透過將:not() 偽類應用於類別選擇器來實現此目的:

:not(.printable) {
    /* Styles */
}

:not([attribute]) {
    /* Styles */
}
登入後複製

但是,為了增強瀏覽器相容性(IE8及以下缺少:not() 支援),建議對元素進行樣式化確實擁有「可列印」類別。如果這不切實際,則可能需要修改標記。

注意事項:

此規則中設定的屬性可能會影響具有「printable」類別的後代。例如,在 :not(.printable) 上設定 display: none 將隱藏它及其後代。相反,請考慮使用visibility:hidden以允許後代顯示,同時保持原始佈局。因此建議謹慎。

以上是CSS 可以選擇沒有特定類別或屬性的元素嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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