在編寫網頁時，我們不可避免地會使用到CSS樣式，而在開發過程中，查看和收起CSS代碼顯得尤為重要。

那么，如何實現CSS的查看和收起呢？答案是使用CSS的偽類“:checked”。

.dropdown {
position: relative;
display: inline-block;
}
.dropdown input[type="checkbox"] {
display: none;
}
.dropdown label {
display: block;
padding: 10px;
background-color: #f2f2f2;
font-size: 16px;
cursor: pointer;
}
.dropdown input[type="checkbox"]:checked + .dropdown-menu {
display: block;
}
.dropdown-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
border: 1px solid #ccc;
z-index: 9999;
padding: 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

以上代碼是一個簡單的下拉菜單效果，其中，利用了“:checked”偽類來控制下拉菜單的顯示和隱藏。當checkbox被選中時，通過“+”選擇器選中下一個元素（即“.dropdown-menu”），然后將其設為塊級元素，從而實現下拉菜單的顯示。反之，當checkbox未選中時，下拉菜單被設為不顯示。

可以使用類似的方法，將CSS代碼分組并收起，從而提高代碼易讀性和工作效率。具體實現方式可以參考如下代碼：

.collapse {
position: relative;
}
.collapse .collapse-label {
display: block;
padding: 10px;
background-color: #f2f2f2;
font-size: 16px;
cursor: pointer;
position: relative;
}
.collapse .collapse-checkbox {
display: none;
}
.collapse .collapse-checkbox:checked + .collapse-body {
display: block;
}
.collapse .collapse-body {
display: none;
background-color: #fff;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
position: absolute;
z-index: 9999;
top: 100%;
left: 0;
width: 100%;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

以上代碼實現了一個可折疊的代碼塊，通過CSS偽類“:checked”來控制代碼塊的展開和收起。當checkbox被選中時，可以選擇下一個元素（即“.collapse-body”）來展開代碼塊；未選中時則收起代碼塊。