純css實現數據分頁主要依賴:target偽類或checkbox hack技術。1. 利用html錨點鏈接和css的:target偽類，通過url hash匹配頁面id控制內容顯示隱藏；2. 使用隱藏的表單元素（如radio按鈕）結合:checked偽類切換內容。其局限性包括：1. 用戶體驗受限，url hash變化影響歷史記錄；2. SEO不友好，搜索引擎難以索引隱藏內容；3. 無法動態加載數據，所有內容需預加載；4. 可訪問性差，屏幕閱讀器可能讀取全部內容；5. 維護復雜，難以實現“上一頁/下一頁”等高級功能；6. 無法感知當前頁碼，導航高亮需JavaScript支持。應用場景限于極簡靜態頁面、css技巧演示、tab切換等非傳統分頁需求。因此，大多數實際項目應使用javascript實現更健壯的分頁系統。
純CSS實現數據分頁，通常依賴于:target偽類或巧妙利用表單元素（如checkbox）的狀態變化。它本質上是通過控制元素的顯示與隱藏來實現頁面內容的切換，無需JavaScript介入。
解決方案
要實現一個基礎的純CSS分頁器，我們可以利用HTML的錨點鏈接（#id）和CSS的:target偽類。每個“頁面”內容都有一個唯一的ID，導航鏈接指向這些ID。當用戶點擊導航鏈接時，URL的hash部分會改變，:target選擇器就能識別當前被“選中”的頁面并顯示它，同時隱藏其他頁面。
<div class="pagination-container"> <div id="page1" class="page-content active"> <h2>這是第一頁的內容</h2> <p>這里放著一些關于第一頁的文字，也許是產品介紹，或者博客文章的一部分。</p><p><span>立即學習</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免費學習筆記（深入）</a>”；</p> </div> <div id="page2" class="page-content"> <h2>這是第二頁的內容</h2> <p>第二頁通常承載著不同的信息，比如用戶評論或者相關推薦。</p> </div> <div id="page3" class="page-content"> <h2>這是第三頁的內容</h2> <p>最后一頁，也許是聯系方式，或者更多內容的鏈接。純CSS的限制在這里顯得尤為明顯。</p> </div> <nav class="pagination-nav"> <a href="#page1">1</a> <a href="#page2">2</a> <a href="#page3">3</a> </nav> </div>
.pagination-container { max-width: 800px; margin: 20px auto; border: 1px solid #eee; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); position: relative; /* 確保內容可以絕對定位 */ min-height: 200px; /* 避免內容切換時容器高度跳動 */ } .page-content { display: none; /* 默認所有頁面都隱藏 */ position: absolute; /* 絕對定位，讓所有頁面重疊 */ top: 15px; left: 15px; right: 15px; bottom: 60px; /* 為導航留出空間 */ background-color: #fff; padding: 15px; box-sizing: border-box; opacity: 0; /* 用于過渡效果 */ transition: opacity 0.3s ease-in-out; } /* 默認顯示第一頁，或通過URL hash決定 */ .page-content.active { display: block; opacity: 1; } /* 當URL hash匹配某個頁面ID時，顯示該頁面 */ .page-content:target { display: block; opacity: 1; } /* 隱藏所有非當前目標頁面 */ .page-content:target ~ .page-content:not(:target), .page-content:target + .page-content:not(:target) { display: none; opacity: 0; } /* 如果沒有target，則默認顯示第一個頁面 */ /* 這是一個稍微復雜但實用的技巧：如果URL中沒有hash，或者hash不匹配任何頁面， 則第一個頁面（或你指定的默認頁面）會被顯示。 這里我們用body:not(:target)來表示沒有匹配的target，然后結合兄弟選擇器。 但對于更復雜的情況，通常還是需要JavaScript來初始化默認顯示。 對于純CSS，最直接的方式是讓第一個頁面默認就`display: block`，然后`:target`會覆蓋它。 */ .page-content:first-of-type { display: block; /* 默認顯示第一個頁面 */ opacity: 1; } /* 當有 :target 存在時，覆蓋默認顯示 */ .page-content:target ~ .page-content:first-of-type { display: none; opacity: 0; } .pagination-nav { position: absolute; bottom: 15px; left: 15px; right: 15px; text-align: center; } .pagination-nav a { display: inline-block; padding: 8px 15px; margin: 0 5px; border: 1px solid #ccc; border-radius: 4px; text-decoration: none; color: #333; transition: background-color 0.2s, color 0.2s; } .pagination-nav a:hover { background-color: #f0f0f0; } /* 導航鏈接的選中狀態 */ /* 純CSS下，導航鏈接的“選中”狀態無法直接與當前顯示的頁面內容聯動， 因為它不能直接感知URL hash。通常需要JavaScript來添加active類。 但我們可以通過`:focus`或者`:active`來模擬點擊時的視覺反饋。 這里我們不強制實現選中狀態，因為這超出了純CSS的合理范疇。 */
純CSS分頁器真的實用嗎？它有哪些局限性？
坦白說，我個人認為純CSS分頁器在大多數真實世界的應用場景中，實用性是相當有限的。它更像是一種技術上的炫技，或者在特定、極簡的靜態頁面中偶爾能派上用場。
主要的局限性在于：
- 用戶體驗受限：當用戶點擊分頁鏈接時，URL的hash會改變，這會導致瀏覽器歷史記錄中增加一個條目。如果用戶頻繁點擊，瀏覽器歷史會變得混亂。更重要的是，它無法實現平滑的滾動到頂部，或者在內容切換時提供更復雜的動畫效果。
- SEO挑戰：搜索引擎爬蟲通常不會執行JavaScript，但它們對URL hash的處理也比較有限。這意味著，通過:target隱藏的內容可能不會被搜索引擎很好地索引。如果你的分頁內容對SEO很重要，這幾乎是不可接受的。
- 動態內容缺失：純CSS無法從后端獲取數據，也無法根據用戶交互動態加載內容。所有分頁內容必須在HTML加載時就全部存在于頁面上。這對于大數據量或需要實時更新的場景來說，是致命的缺陷。
- 可訪問性問題：對于屏幕閱讀器或其他輔助技術來說，:target或checkbox hack實現的分頁可能會造成困惑。所有內容雖然視覺上隱藏，但可能仍然存在于dom中，導致閱讀器讀取到所有頁面內容，而不是當前顯示的內容。
- 復雜性與維護：隨著分頁數量的增加，CSS規則會變得越來越復雜，尤其是當你想實現“上一頁/下一頁”或“省略號”效果時。維護起來會非常痛苦，因為你無法像JavaScript那樣靈活地操作DOM或數據。
- 無法感知當前頁：CSS本身無法知道當前是第幾頁，也無法根據當前頁碼來動態生成或改變導航鏈接的樣式（例如，將當前頁碼的鏈接高亮顯示）。這需要JavaScript的參與。
所以，如果你的目標是構建一個健壯、用戶友好且SEO友好的分頁系統，JavaScript（通常配合后端API）是唯一且正確的選擇。
除了:target，還有其他純CSS實現分頁的思路嗎？
除了:target，確實還有一些其他純CSS的“黑科技”可以用來實現類似分頁的效果，但它們通常更復雜，且局限性更大。
一種常見的思路是利用checkbox hack。這涉及到將一個隱藏的checkbox作為開關，通過它的:checked偽類來控制相鄰或兄弟元素的顯示與隱藏。
<div class="checkbox-pagination-container"> <input type="radio" id="tab1" name="tabs" checked class="tab-input"> <input type="radio" id="tab2" name="tabs" class="tab-input"> <input type="radio" id="tab3" name="tabs" class="tab-input"> <div class="tab-labels"> <label for="tab1">頁面一</label> <label for="tab2">頁面二</label> <label for="tab3">頁面三</label> </div> <div class="tab-content-wrapper"> <div class="tab-content" id="content1"> <h3>Checkbox 分頁內容 1</h3> <p>這是通過單選框切換的內容。這種方式在某些情況下比:target更靈活，因為不依賴URL hash。</p> </div> <div class="tab-content" id="content2"> <h3>Checkbox 分頁內容 2</h3> <p>每個內容塊都與一個radio按鈕關聯。當radio被選中時，對應的內容塊就會顯示。</p> </div> <div class="tab-content" id="content3"> <h3>Checkbox 分頁內容 3</h3> <p>然而，這種方法同樣有SEO和動態內容的限制。所有內容依然需要預加載。</p> </div> </div> </div>
.checkbox-pagination-container { max-width: 800px; margin: 20px auto; border: 1px solid #eee; padding: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); } .tab-input { display: none; /* 隱藏實際的radio按鈕 */ } .tab-labels { display: flex; justify-content: center; margin-bottom: 15px; } .tab-labels label { padding: 10px 20px; cursor: pointer; border: 1px solid #ddd; border-radius: 4px; margin: 0 5px; background-color: #f9f9f9; transition: background-color 0.2s, color 0.2s; } .tab-labels label:hover { background-color: #f0f0f0; } /* 當對應的radio被選中時，改變label的樣式 */ #tab1:checked ~ .tab-labels label[for="tab1"], #tab2:checked ~ .tab-labels label[for="tab2"], #tab3:checked ~ .tab-labels label[for="tab3"] { background-color: #007bff; color: white; border-color: #007bff; } .tab-content { display: none; /* 默認所有內容隱藏 */ padding: 15px; border: 1px solid #eee; border-top: none; opacity: 0; transition: opacity 0.3s ease-in-out; } /* 當對應的radio被選中時，顯示其后面的內容 */ #tab1:checked ~ .tab-content-wrapper #content1, #tab2:checked ~ .tab-content-wrapper #content2, #tab3:checked ~ .tab-content-wrapper #content3 { display: block; opacity: 1; }
這種方法避免了URL hash的改變，但它依賴于HTML結構中radio按鈕和內容之間的特定兄弟或通用兄弟關系（~選擇器），這使得DOM結構必須非常固定。對于更復雜的分頁邏輯，比如“上一頁/下一頁”按鈕，或者動態頁碼的生成，純CSS就顯得力不從心了。
還有一些更邊緣的嘗試，比如利用:nth-child選擇器來控制列表項的顯示，但這需要固定每頁顯示的條目數，并且只能通過改變父元素的類名或通過復雜的兄弟選擇器來間接實現“翻頁”效果，實用性幾乎為零。
總的來說，這些純CSS方法更像是CSS能力邊界的探索，而非實際項目中的主流解決方案。
在實際項目中，何時會考慮純CSS分頁？
說實話，在我的實際開發經驗里，極少會主動選擇純CSS來做“數據分頁”。它更多的是一種概念驗證或者特定場景下的“奇技淫巧”。
如果非要找幾個可能考慮的場景，那大概是：
- 極簡靜態頁面，內容量極小且固定：比如一個只有三五頁內容的FAQ頁面，每頁內容都非常短小，且內容永遠不會變動。在這種情況下，使用:target可能比引入JavaScript文件更輕量。但即便如此，我也傾向于用JavaScript來提供更好的用戶體驗和可訪問性。
- 純粹的CSS技巧演示：在一些技術分享、CodePen示例或者個人作品集中，為了展示CSS的強大和創造性，可能會刻意使用純CSS分頁。它能讓人眼前一亮，但往往不具備生產環境的魯棒性。
- 作為后備方案（極不可能）：理論上，如果JavaScript因某種原因無法加載（比如用戶禁用了JS，或者CDN加載失敗），純CSS分頁可以作為一種“降級”體驗，確保內容至少是可訪問的。但這種場景非常罕見，且通常會有更優雅的降級策略。
- “偽分頁”的Tab切換：某些時候，我們可能并不是真的在做“數據分頁”，而是更像一種內容區域的Tab切換。如果這些Tab的數量固定且內容預加載，那么Checkbox Hack或者:target可以用來實現這種視覺上的“分頁”效果，而無需JavaScript。這其實更接近于Tab組件，而非傳統意義上的分頁。
除了這些非常特定的、甚至有些勉強的場景，任何涉及到動態數據加載、大量內容、復雜用戶交互（如搜索、篩選、排序）、SEO需求或者對可訪問性有較高要求的項目，都應該毫無疑問地選擇JavaScript來實現分頁。JavaScript提供了無限的靈活性和控制力，能夠構建出真正高效、用戶友好的分頁系統。純CSS分頁，在我看來，更多的是一種對CSS極限的探索，而非解決實際問題的首選工具。
