
可以編寫(xiě) CSS 來(lái)選擇缺少類或?qū)傩缘脑貑幔?/strong>
當(dāng)希望選擇不具備類或?qū)傩缘脑貢r(shí),就會(huì)出現(xiàn)此問(wèn)題特定的類或?qū)傩?。例如,考慮下面的 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>
在這種情況下,我們的目標(biāo)是選擇沒(méi)有“printable”類的元素,即 nav 和 a
解決方案:
傳統(tǒng)上,可以通過(guò)將 :not() 偽類應(yīng)用于類選擇器來(lái)實(shí)現(xiàn)此目的:
:not(.printable) {
/* Styles */
}
:not([attribute]) {
/* Styles */
}
但是,為了增強(qiáng)瀏覽器兼容性(IE8及以下缺少 :not() 支持),建議對(duì)元素進(jìn)行樣式化確實(shí)擁有“可打印”類別。如果這不切實(shí)際,則可能需要修改標(biāo)記。
注意事項(xiàng):
此規(guī)則中設(shè)置的屬性可能會(huì)影響具有“printable”類的后代。例如,在 :not(.printable) 上設(shè)置 display: none 將隱藏它及其后代。相反,請(qǐng)考慮使用visibility:hidden以允許后代顯示,同時(shí)保持原始布局。因此建議謹(jǐn)慎。
以上是CSS 可以選擇沒(méi)有特定類或?qū)傩缘脑貑??的詳?xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章!