幾年前，Web開發人員無法僅使用CSS實施和構建如此多的東西，而無需依賴JavaScript。但是今天，CSS已經足夠成熟，可以在不編寫一行JavaScript的情況下做強大的事情。您可能還閱讀了幾篇有關“僅CSS方法”的文章，這些文章證明了CSS的力量。
>僅使用CSS方法，我們不能忽略：檢查的偽級選擇器，我將在這篇文章中使用。當然，我不是第一個寫有關此技術的人，並且關於使用形式元素作為JavaScript替代品還有其他更廣泛的討論。例如，路易斯·拉扎里斯（Louis Lazaris）和瑞安·塞登鑰匙要點
：CSS中的檢查偽級選擇器可用於構建樣式切換器，而無需編寫JavaScript行。它選擇了檢查或選擇的任何收音機或複選框元素。
- >
- ：檢查的偽級選擇器與輸入和標籤元素結合使用。單擊標籤元素中的“ for”屬性，選擇或檢查關聯的輸入元素，從而可以使用：checked selector。 > CSS“位置：固定”聲明以及“頂部”和“右”屬性可用於在頁面上定位元素。 “ z index”屬性可確保標籤保持頁面上其他任何元素的頂部。
- ：基於用戶與關聯標籤元素的用戶互動，可以使用：檢查的偽級選擇器來更改元素的背景，隱藏或顯示內容或應用其他樣式。
- >：檢查的偽級選擇器與相鄰的兄弟姐妹選擇器（）和一般的兄弟姐妹選擇器（〜）一起使用，從而允許頁面上不同元素之間的相互作用。該技術可用於在網頁上創建各種交互式功能。 >
- >使用：檢查
- 簡而言之， ：檢查的偽級選擇器代表（選擇）被檢查或選擇的任何無線電或複選框元素。用戶可以通過選中復選框或在一組無線電按鈕中選擇其他值來更改這些元素的狀態。
>在我們深入研究之前，請看一下最後的演示，以了解我們在本教程中將要構建的內容：
>請參閱純CSS的筆式切換器，使用：codepen上的sitepoint（@sitepoint）檢查。
現在讓我們開始。
>構建設置框
在演示中，您應該注意到齒輪圖標以及單擊時如何出現帶有一些選項的盒子。在我們繼續解釋組成該框的HTML和CSS之前，請查看以下代碼：>
<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span> <span>position: absolute;
</span> <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span> <span>z-index: 10;
</span><span>}</span>>由於我們僅有興趣顯示標籤，因此上述代碼用於隱藏複選框和無線電按鈕。此外，所有標籤都有一類設置盒元素，並具有Z-Index屬性，只是為了確保標籤將保持在頁面上的任何其他元素的頂部。 >
>現在我們可以分解構成設置框的代碼。讓我們從齒輪按鈕開始。這是html：
<span><!-- the gear icon that opens the box when you click on it --> </span><span><span><span><input> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span> </span><span><span><span><label> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></label></span><span><span></span>></span></span></span></span>和CSS：
<span><span>.settings-btn + label</span> {
</span> <span>position: fixed;
</span> <span>top: 130px;
</span> <span>right: 0;
</span> <span>display: block;
</span> <span>width: 35px;
</span> <span>color: #e83737;
</span> <span>text-align: center;
</span> <span>background: #fff;
</span> <span>cursor: pointer;
</span><span>}</span>>您已經閱讀了一兩篇文章，以將表單元素用作JavaScript替代品，那麼您應該已經知道我們需要一起使用輸入和標籤元素，以便如果刪除了兩個元素，則無效。因此，我們有一個帶有AN和一個標籤的複選框輸入，其中符合ID值的屬性。我還添加了一類設置-BTN用於我們的CSS掛鉤。 > 在CSS中，給出標籤的位置：固定聲明，具有適當的方向屬性/值（頂部和右）。
下一html首先：
和CSS：
框是一個單個DIV元素，其中包含“按鈕 - 版本”和“設置 - 盒元素”。正如我之前所說，後一類主要用於給出元素一個z指數值。 “按鈕 - 包裝器”用於樣式DIV元素。如您所見，DIV的寬度為200px，高度為240px，以適應您在演示中看到的5個按鈕。同樣，為DIV賦予固定權利和適當屬性的位置值。您唯一需要牢記的是，正確的屬性應具有與寬度相同的值，但在負面方面（為了使其從視口消失）。
><span><!-- the white box that contains the buttons --> </span><span><span><span><div> class<span>="buttons-wrapper settings-box-element"</span>><span><span></span></span> </div></span>></span></span>>現在讓我們查看剩餘標記的代碼，即5個按鈕。評論表示他們控制的背景樣式：
<span><span>.buttons-wrapper</span> {
</span> <span>position: fixed;
</span> <span>top: 130px;
</span> <span>right: -200px; /* should match element width */
</span> <span>width: 200px;
</span> <span>height: 240px;
</span> <span>background: #fff;
</span><span>}</span>，這是CSS：
請注意，第一個複選框給出了“檢查”屬性。那是因為我們希望它是默認情況下突出顯示的那個。
><span><!-- background styles --> </span><span><!-- light background (#eaeaea) --> </span><span><span><span><input> id<span>="light-layout"</span> class<span>="light-layout"</span> type<span>="radio"</span> name<span>="layout"</span> checked></span> </span><span><span><span><label> for<span>="light-layout"</span> class<span>="layout-buttons settings-box-element"</span>></label></span> </span>Light Background<span><span><span></span>></span> </span> <span><!-- dark background (#494949) --> </span><span><span><span><input> id<span>="dark-layout"</span> class<span>="dark-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span> </span><span><span><span><label> for<span>="dark-layout"</span> class<span>="layout-buttons settings-box-element"</span>></label></span> </span>Dark Background <span><span><span></span>></span> </span> <span><!-- image background --> </span><span><span><span><input> id<span>="image-layout"</span> class<span>="image-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span> </span><span><span><span><label> for<span>="image-layout"</span> class<span>="layout-buttons settings-box-element"</span>></label></span> </span>Image Background<span><span><span></span>></span> </span> <span><!-- pattern background --> </span><span><span><span><input> id<span>="pattern-layout"</span> class<span>="pattern-layout"</span> type<span>="radio"</span> name<span>="layout"</span>></span> </span><span><span><span><label> for<span>="pattern-layout"</span> class<span>="layout-buttons settings-box-element"</span>></label></span> </span>Pattern Background<span><span><span></span>></span> </span> <span><!-- hide/show content --> </span><span><span><span><input> id<span>="hide-show-content"</span> class<span>="hide-show-content"</span> type<span>="checkbox"</span>></span> </span><span><span><span><label> for<span>="hide-show-content"</span> class<span>="layout-buttons settings-box-element"</span>></label></span> </span>Hide/Show content<span><span><span></span>></span></span></span></span></span></span></span></span></span></span></span></span>每個輸入字段都有一個ID，每個標籤都有一個屬性，該屬性與其中一個輸入字段的ID匹配。而且，您可能知道或可能不知道，這種技術背後的秘密是屬性，因為當單擊具有for屬性的標籤時，將選擇/檢查與該特定標籤相關的元素，因此，這允許我們使用：檢查的選擇器。
上述所有標籤都有一類“佈局按鈕”。該類用於給按鈕提供默認和常見樣式，例如寬度，填充，邊框等。其他類用於將唯一樣式添加到每個類別中。正如您看到的齒輪圖標和白色框一樣，位置屬性與固定的值以及適當的頂部和正確屬性一起使用。請注意，每個標籤的最高值比以前的標籤大於45px。這是為了使按鈕彼此疊加，而沒有重疊。還請注意，正確的屬性值與按鈕的寬度相同，但為負。
現在看一下我們CSS代碼的最後一部分：>
<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span> <span>position: absolute;
</span> <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span> <span>z-index: 10;
</span><span>}</span>>上述CSS用於更改與所選廣播按鈕關聯的標籤的默認樣式（我們有4個無線電按鈕）。我使用相鄰的同胞選擇器來定位“無線電”類型的輸入字段之前的每個標籤。因此，如您所見，背景和邊框屬性被賦予值＃E83737（紅色顏色）和顏色屬性為#fff。沒有什麼真正喜歡或複雜的。 HTML中的其餘元素將包裹在DIV中：
>在上面的代碼中註意，我將設置框的每個元素放置在獨立的情況下，我可以將它們全部包裹在DIV或部分元素中，然後將一個單個元素放置，從而使事情變得更簡單。這僅僅是因為您不能選擇父元素，而只有一個兄弟姐妹。
<span><!-- the gear icon that opens the box when you click on it --> </span><span><span><span><input> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span> </span><span><span><span><label> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></label></span><span><span></span>></span></span></span></span>> 因此，在這種情況下，所有主要內容都包裹在DIV內。正如您稍後會看到的，要能夠更改此DIV的樣式，我們需要通過編寫與此類似的內容來選擇該div：
>在這裡，我正在使用一般的同級選擇器來選擇主div，這是唯一做到這一點的方法。
<span><span>.settings-btn + label</span> {
</span> <span>position: fixed;
</span> <span>top: 130px;
</span> <span>right: 0;
</span> <span>display: block;
</span> <span>width: 35px;
</span> <span>color: #e83737;
</span> <span>text-align: center;
</span> <span>background: #fff;
</span> <span>cursor: pointer;
</span><span>}</span>單擊齒輪圖標單擊齒輪圖標應使設置框顯示。這是實現這一目標的代碼：
>
>用戶單擊齒輪圖標時，將選擇使用複選框，而魔術則是魔術。單擊齒輪圖標後，將會發生以下內容：
<span><!-- the white box that contains the buttons --> </span><span><span><span><div> class<span>="buttons-wrapper settings-box-element"</span>><span><span></span></span> </div></span>></span></span>
>
使用相鄰的兄弟姐妹選擇器（），將選擇該複選框後立即出現的標籤，然後從視口右側移動200個像素。- >
>使用一般同級選擇器〜，將選擇帶有“按鈕- wrapper”和“ butout buttons”類的元素，然後移動，以便它們分別是0個像素和30像素，從視口。
- 相鄰的同胞選擇器和一般兄弟姐妹選擇器在這裡都是必不可少的，因為沒有它們，此技術將無法使用。
>
更改背景
<span>/* we don't want the input fields to appear, all we need is the labels */
</span><span>input<span><span>[type="checkbox"]</span>, input<span>[type="radio"]</span></span> {
</span> <span>position: absolute;
</span> <span>visibility: hidden;
</span><span>}
</span>
<span><span>.settings-box-element</span> {
</span> <span>z-index: 10;
</span><span>}</span>
我們將要更改的背景是.main-wrapper元素的背景。這是CSS：
<span><!-- the gear icon that opens the box when you click on it --> </span><span><span><span><input> id<span>="settings-btn"</span> class<span>="settings-btn"</span> type<span>="checkbox"</span>></span> </span><span><span><span><label> for<span>="settings-btn"</span> class<span>="settings-box-element"</span>></label></span><span><span></span>></span></span></span></span>
>您可以看到，在HTML中，我們有4個輸入元素=“無線電”和4個標籤。當單擊任何標籤時，將選擇與該特定標籤關聯的輸入，因此將與：檢查的偽級相匹配。然後，根據單擊哪個標籤，以上四種樣式之一將應用於主包裝器。
>>隱藏/顯示內容
>對於顯示/隱藏元素，我正在使用一個複選框：
><span><span>.settings-btn + label</span> {
</span> <span>position: fixed;
</span> <span>top: 130px;
</span> <span>right: 0;
</span> <span>display: block;
</span> <span>width: 35px;
</span> <span>color: #e83737;
</span> <span>text-align: center;
</span> <span>background: #fff;
</span> <span>cursor: pointer;
</span><span>}</span>
，這是CSS：
<span><!-- the white box that contains the buttons --> </span><span><span><span><div> class<span>="buttons-wrapper settings-box-element"</span>><span><span></span></span> </div></span>></span></span>
在這種情況下，我們告訴瀏覽器選擇元素並將其設置為顯示：無”當用戶單擊關聯標籤時，因此選擇複選框。
結論>使用此選擇器技術，您還可以做很多其他事情，而極限是您自己的創造力。如果這項技術對您來說是新的，我希望本文可以作為您嘗試其他可能性的起點。
>
下面您會找到完整的演示：>請參閱純CSS的筆式切換器，使用：codepen上的sitepoint（@sitepoint）檢查。
>經常詢問的問題（常見問題解答）使用檢查
使用純CS構建樣式切換器
在CSS中檢查的偽級是什麼目的？ ，或用戶選擇的選項元素。它是一個強大的工具，可讓開發人員在不需要JavaScript的情況下創建交互式和動態的網頁。例如，它可用於創建樣式切換器，用戶可以通過選擇不同的選項來更改網頁的外觀。>
>：檢查偽級工作如何？ ：通過選擇當前選擇或檢查的HTML元素來檢查偽級的作品。它通常與復選框或無線電按鈕之類的形式元素使用。當用戶選擇或檢查以下元素之一時，：檢查的偽級會變得活躍，並將指定的CSS樣式應用於該元素。這可以用來突出顯示所選的選項，顯示或隱藏內容，甚至更改網頁的整個佈局。>
我可以使用：檢查的偽級與其他html元素？the：Checked pseudo-class主要用於復選框，無線電按鈕和選項元素等形式元素。但是，它也可以與其他元素一起與HTML5屬性“可滿足”一起使用。這使您可以創建用戶可以編輯的交互式內容，並在“檢查”或“選定”狀態時以不同的方式進行樣式。
>>如何使用：檢查的偽級來創建樣式切換器？
>使用：檢查的偽級創建樣式切換器，您首先需要使用無線電按鈕或無線電按鈕或每個樣式選項的複選框。然後，在您的CSS中，您將使用：檢查的偽級使用：根據選擇哪個選項來應用不同的樣式。這可能涉及更改網頁外觀外觀的配色方案，字體，佈局或任何其他方面。
>我可以使用：檢查的偽級來創建動態內容嗎？ ：檢查偽級可用於創建動態內容。通過將其與其他CSS選擇器和屬性相結合，您可以根據用戶的選擇顯示或隱藏內容，更改佈局或創建交互式功能。這可以極大地增強用戶體驗，並使您的網頁更具吸引力和交互性。
可以使用：不帶JavaScript的檢查偽級？的：檢查的偽級是，它允許您在不需要JavaScript的情況下創建交互式功能。儘管JavaScript是Web開發的強大工具，但它也可能很複雜且難以使用。 ：檢查的偽級提供了一種更簡單的替代方案，用於創建交互式內容。
如何在不同的瀏覽器中支持的：檢查的偽級？
：：檢查的偽級在所有現代瀏覽器，包括Chrome，Firefox，Safari和Edge。但是，Internet Explorer 8或更早版本中不支持它。因此，如果您需要支持這些較舊的瀏覽器，則可能需要使用基於JavaScript的解決方案。>
>我可以使用：檢查的偽級對樣式的複選框和無線電按鈕？ >是的，可以使用：檢查的偽級可用於樣式的複選框和無線電按鈕。默認情況下，這些表單元素具有非常基本的外觀，但是使用：檢查偽級，您可以自定義它們的外觀以匹配其餘的網站。當選擇這些元素時，您可以更改顏色，大小，形狀，甚至這些元素的動畫。>
>：檢查的偽級？檢查偽級通常用於創建交互式功能，例如樣式切換器，手風琴，選項卡和模態。它也可以用於樣式形式形式的元素，例如復選框和無線電按鈕，或者用“可滿足”屬性創建可編輯的內容。它對用戶輸入做出反應的能力使其成為增強用戶體驗的強大工具。>使用：檢查的偽級
>>
> >時，是否有任何限製或缺點。它只能選擇當前選擇或檢查的元素，因此不能根據其他狀態或條件來設計元素。此外，Internet Explorer 8或更早版本中不支持它。儘管有這些限制，但它仍然是創建交互式和動態的Web內容的寶貴工具。以上是使用純CSS構建樣式切換器，使用：檢查的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
揭開屏幕讀取器的神秘面紗：可訪問的表格和最佳實踐Mar 08, 2025 am 09:45 AM這是我們在形式可訪問性上進行的小型系列中的第三篇文章。如果您錯過了第二篇文章，請查看“以：focus-visible的管理用戶焦點”。在
使用智能表單框架創建JavaScript聯繫表格Mar 07, 2025 am 11:33 AM本教程演示了使用智能表單框架創建外觀專業的JavaScript表單（注意：不再可用）。 儘管框架本身不可用，但原理和技術仍然與其他形式的建築商相關。
將框陰影添加到WordPress塊和元素Mar 09, 2025 pm 12:53 PMCSS盒子陰影和輪廓屬性獲得了主題。讓我們查看一些在真實主題中起作用的示例，以及我們必須將這些樣式應用於WordPress塊和元素的選項。
比較5個最佳的PHP形式構建器（和3個免費腳本）Mar 04, 2025 am 10:22 AM本文探討了Envato Market上可用的PHP表單構建器腳本，比較了其功能，靈活性和設計。 在研究特定選項之前，讓我們了解PHP形式構建器是什麼以及為什麼要使用一個。 PHP形式
使您的第一個自定義苗條過渡Mar 15, 2025 am 11:08 AMSvelte Transition API提供了一種使組件輸入或離開文檔（包括自定義Svelte Transitions）時動畫組件的方法。
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫：如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險：如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌
擊敗分裂小說需要多長時間？
3 週前ByDDD
R.E.P.O.保存文件位置：在哪里以及如何保護它？
4 週前ByDDD
熱工具
EditPlus 中文破解版
體積小，語法高亮，不支援程式碼提示功能
Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境，安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問，並防止學生使用未經授權的資源。
MantisBT
Mantis是一個易於部署的基於Web的缺陷追蹤工具，用於幫助產品缺陷追蹤。它需要PHP、MySQL和一個Web伺服器。請查看我們的演示和託管服務。
SublimeText3 英文版
推薦：為Win版本，支援程式碼提示！
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
