是否可以在 CSS 中定位“無目標”？

Question

是否有用於“不存在片段標識符”的 css 選擇器？ :target的反面。

問題是，我正在制作一個文檔，其中的不同部分是可見的，具體取決於您提供的片段標識符。 把它想象成一個精靈文件，只適用於 HTML。

所以它看起來像這樣

<style>
 section {display:none}
 section:target {display:block}
</style>

<body>
 <section id="one">The first block (showing with #one)</section>
 <section id="two">The second block (showing with #two)</section>
 <section id="three">The third block (showing with #three)</section>
</body>

如果在位置欄上顯示document.html#one等，用戶會看到第一部分。

這個想法是瀏覽器將緩存 html 頁面（因為它只是靜態 html）並且在顯示另一個文本塊時不需要加載其他內容，從而最小化服務器負載。

但是當您在沒有片段標識符的情況下調用文件時，該文件看起來非常空，所以我想知道是否有辦法在這種情況下使其所有內容都可見，而沒有任何隱藏部分。 只有 CSS，沒有 JS 或服務器端處理； 否則它就不是靜態 HTML！

編輯：
與建議的重復項不同，當沒有片段標識符時，我想“簡單地”顯示整個文檔，而不僅僅是一個特定的元素。
換句話說，默認值（沒有任何#）應該是顯示所有內容； 只有當有一個＃應該一切，但目標是隱藏的。
重復項根本沒有解決這種情況。

Answer 1

使用一些額外的標記和更詳細和特定的 CSS 來編寫，以避免使用 javaScript。 每次更新 HTML 結構時都需要更新。

 :target ~section { display:none; } #one:target ~.one, #two:target ~.two, #three:target ~.three { display:block; }

 <nav> <a href="#one">One</a> <a href="#two">Two</a> <a href="#three">Three</a> <a href="#">None of below targets</a> </nav> <!-- html anchor to allow use of :target ~ selectors --> <a id="one"></a> <a id="two"></a> <a id="three"></a> <!-- end anchor --> <section class="one">The first block (showing with #one)</section> <section class="two">The second block (showing with #two)</section> <section class="three">The third block (showing with #three)</section>

是否可以在 CSS 中定位“無目標”？

問題描述

1 個解決方案

解決方案1
5 已采納 2016-06-27 20:16:01

是否可以在 CSS 中定位“無目標”？

問題描述

1 個解決方案

解決方案1 5 已采納 2016-06-27 20:16:01

解決方案1
5 已采納 2016-06-27 20:16:01