CSS 搞事技巧：checkbox+label+selector

alphahans 發布于2019-08-30 15:43 / 1126人閱讀

摘要：列出這個兩個屬性的常用值看可知已經增加了更多的值代碼解讀該項目是通過來渲染的，所以會使用到的語法，不過此處僅使用的循環來解決重復書寫的問題該效果參考來源。接著使用布局來將它們分割，因為這次主要將的不是，所以就不進行闡述了。

介紹

其實這篇文章寫到一大半時它的名字還叫做《重溫 Flex 布局》，結果寫著寫著就走了心，附上一圖表示心情吧：

其實我并不是一個喜歡搞事的人，真的，從我游戲：屠夫沉默（DOTA2），蓋倫（LOL），亞瑟（農藥）的英雄池完全可以看出來。

這三個元素作為這個《CSS 搞事技巧》的第一篇并非僅僅是在接下來的《重溫 Flex 布局》中要使用，而是因為這個技巧的確是很基礎。

核心概念：所謂技巧，無非就是保存狀態（劃重點啦）。

示例

示例部分僅放 Gif 圖樣及源碼地址，詳情請查看技巧說明部分（技巧是通用的）。

1. switch 開關

樣式模仿的是 Vuetify 的 Switches 。

Gif 預覽：

動畫源碼、在線動畫

2. 關燈效果

上面實現了開關，那么一個簡單的聯想當然是開關燈啦。

Gif 預覽：

動畫源碼、在線動畫

技巧說明

在 JavaScript 中，我們可以利用變量，DOM 來保存狀態，而 CSS 當中，我們也可以利用偽類選擇器來保存狀態，這就是 CSS 搞事的核心了，也是上面示例實現的本質。

回到主題，也就是 Flex 布局來，我們初步回顧一下，Flex 布局的相關概念，首先被聲明了 Flex 彈性布局的元素叫做彈性容器，其子元素被稱為彈性項目。這個彈性容器中默認存在兩個軸，一個叫做主軸（main axis），側軸（cross axis）。整個 Flex 容器具有六個屬性，此次僅介紹兩個：justify-content 和 align-items （提一下 align-content 是多行的概念）。

列出這個兩個屬性的常用值（看 MDN 可知已經增加了更多的值）：

.flex {
  justify-content: flex-start | flex-end | center | space-between | space-around;
  align-items: flex-start | flex-end | center;
}

代碼解讀

該項目是通過 VuePress 來渲染的，所以會使用到 Vue 的語法，不過此處僅使用 Vue 的 for 循環來解決重復書寫 DOM 的問題；該效果參考來源。

1. label

功能欄與展示欄分列兩側，首先是完成 DOM 結構：

flex__feats 為左側功能欄，flex__exh 為展示欄。


  
    
      justify
      
        flex-start
        flex-end
        center
        space-between
        space-around
      
    
    
      align
      
        flex-start
        flex-end
        center

接著使用 Flex 布局來將它們分割，因為這次主要將的不是 Flex，所以就不進行闡述了。

可以注意到功能欄的 DOM 結構是重復的，使用 Vue 來簡化一下吧：


  
    {{feat.title}}
    
      {{item}}

2. checkbox

接著需要一堆 checkbox 來觸發狀態，因為 DOM 解析是深度優先，CSS 中也沒有父選擇器這一說，雖然有一定的辦法 hack 一下，所以這一堆 checkbox 就需要放在頂部：

接著需要將其隱藏：

.toggle[type="checkbox"]
  width 0
  height 0
  filter opacity(0)
  opacity 0
  display none

3. selector

要想生效的話，還需要將 input 的 id 綁定到 label 上：

{{item}}

接著利用 selector（選擇器），獲取到 label 并改變其顏色證明它是被選召的孩子，舉個例子（完整版）：

#jusitify-flex-start:checked ~ .flex__feats .jusitify-flex-start
  padding 4px 4px
  background-color #5a191b // 栗紫
  color #fffef9 // 雪白

測試綁定情況：

4. 右側展示

首先在其中添加三個元素，幫助我們觀察效果：

&__exh
  flex-grow 1
  padding 16px
  .exh__item
    width 15%
    height 15%
    box-shadow 0 0 4px rgba(0, 0, 0, .5)
    &:nth-child(1)
      width 18%
      height 20%
    &:nth-child(2)
      width 14%
      height 18%
    &:nth-child(3)
      width 15%
      height 15%

接著繼續使用 selector 來完成最后的任務，示例（完整版）：

#jusitify-flex-start:checked ~ .flex__exh
  display flex
  justify-content flex-start

這樣就大功告成啦，在線查看。

最后

CSS 的美麗是有多個屬性組合而成。切記要和設計師搞好關系，不然你這些屬性都會了，做出來的東西還是會很難看的……

預告：《重溫 Flex 布局》正在路上。

參考資料

Vuetify

配色方案：中國色

MDN

GPU云服務器云服務器 css技巧 Selectors Selector CheckBox

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116051.html

CSS 搞事技巧：hover+active

摘要：核心概念保存狀態。在上一篇搞事技巧中利用來加深了解了的彈性容器屬性，這一節是要利用來了解的彈性項目屬性。最后很多屬性我們可能難以理解其效果，個人認為運用來解釋不失為一種良好的方式。介紹在 JavaScript 中，我們可以利用變量，DOM 來保存狀態，而 CSS 當中，我們也可以利用偽類選擇器來保存狀態，這就是 CSS 搞事的核心了。核心概念：保存狀態。在上一篇 CSS 搞事技...

cangck_X 2019-08-30 15:43 評論0 收藏0
CSS 搞事技巧：border+transparent

摘要：默認盒模型的正方形在上方已經說明了，正方形的被擠壓為時就會得到三角形的效果。這里選擇一種較為取巧的形式，因為這邊使用的是行內樣式，所以可以直接在它的上獲取。面試前還是要為面試刷下題目的，不然真的容易懵介紹出門忘帶電源線，快遞到了終于可以繼續水文章了。好不容易獲得一個面試機會，面試官很 Nice，可惜的是當時處于懵逼狀態，錯過了大好的機會：面試官：巴拉巴拉吧…… 我：嗯，啊，這個，...

nifhlheimr 2019-08-29 18:37 評論0 收藏0
重溫 Flex 布局

摘要：而通過實現則簡單多了源碼原因解釋中間一欄為核心，所以需要優先渲染，結構也就放在了前面，主要是使用屬性將放置到前方。源碼的列數每列的個數函數原因解釋實現瀑布流還是比較簡單的。介紹這是關于 Flex 布局的實踐，原想還水一點字數來介紹 Flex 相關屬性，想想還是算了，阮一峰大佬的兩篇文章推上： Flex 布局教程：語法篇 Flex 布局教程：實例篇如何用 CSS 來增進對 Fl...

binta 2019-08-30 15:43 評論0 收藏0