CSS代碼開關：切換當前頁面的時間樣式

// 默認樣式：12小時制
.clock {
font-size: 2rem;
font-family: Arial, sans-serif;
color: #333;
text-align: center;
}
// 切換至24小時制
.switch:checked + .clock::before {
content: attr(data-twelve);
}
.clock::before {
content: attr(data-twentyfour);
}
.switch + label {
display: inline-block;
margin-left: 1rem;
cursor: pointer;
font-family: Arial, sans-serif;
}
.switch + label::before {
content: "24小時制";
}
.switch:checked + label::before {
content: "12小時制";
}

以上代碼實現了一個簡單的開關按鈕，用于切換當前頁面的時間樣式。默認情況下，頁面顯示12小時制的時間，當開關按鈕被選中時，頁面會切換至24小時制的時間格式。

我們利用了CSS選擇器和偽類來實現這個功能。首先，我們在HTML中用一個包裹了一個和一個標簽，用于觸發開關。然后，在CSS中，我們設置了兩套時間顯示的樣式，分別用偽元素::before和data屬性來實現。當開關被選中時，我們使用:checked偽類來選擇switch元素，并通過+選擇器選擇與之后面相鄰的.clock元素中的::before元素，切換data-twelve和data-twentyfour的內容。最后使用:checked偽類和label元素的:before元素來切換開關按鈕的文字內容。