是否可以在CSS中定位「無目標」？

是否存在「沒有片段標識符存在」的CSS選擇器？ :target的相反。是否可以在CSS中定位「無目標」？

的事情是，我正在做一個文檔，其中的不同部分取決於你給哪個片段標識符它是可見的。把它看作一個精靈文件，只能用於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！

編輯：
與建議的重複文件不同，我想在不存在片段標識符的情況下「簡單地」顯示整個文檔，而不僅僅是一個元素。
換句話說，默認（在沒有任何＃）應該是顯示一切;只有當是＃應該隱藏目標以外的所有東西。
重複項目根本無法解決這種情況。

來源

2016-06-27 Mr Lister

你如何最大限度地減少服務器的負載？ HTML文件被提供並完全下載，即使您隱藏該部分，它們仍然會被加載和下載。所以我不太明白你認爲你是如何最小化的。 –

@BramVanroy在這個特殊的使用案例中，我通過不同的片段標識符在整個網站中多次鏈接到文件。所以它只會被下載一次（至少我希望如此），並且在第一次之後它將來自用戶的緩存。 –

請參閱[我對其中一個重複建議的評論]（http://stackoverflow.com/questions/3354279/default-target-with-css#comment46876088_3354279）。由於：target僞匹配目標元素，當*沒有目標元素*時，你期望與「target：opposite：」相匹配的是什麼？ – BoltClock

與一些額外的標記和更詳細和具體的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>

來源

2016-06-27 20:16:01

很好，非常感謝你！ –

是否可以在CSS中定位「無目標」？

回答

相關問題