又過了一週啦~
自從參加了切版直播班就更忙碌了
這次的切版作業也學了很多以前沒學過的語法
這週來記錄一下新學到的 CSS 選擇器吧~

什麼是CSS選擇器

相信初學者剛開始在寫code的時候，看到那個畫面就會寫哪個畫面，但要讓CSS有動作就是要給他取 class 名，
在取 class 名的時候真的很燒腦因為本人英文不是很好，要取名的時候真的不知道要取什麼，不知道大家是不是跟我一樣有相同的困擾呢XDD
除了取 class名之外，最近學到一個好方法，就是使用CSS選擇器中的 child ，他可以幫你整合很多相同的樣式，可以讓 html 的語法較為簡潔乾淨，範例如下：

              <ul class="design-ul-inside">
                <li>
                  <img src="images/24.png" alt="">
                </li>
                <li>
                  <ul>
                    <li>
                      <img src="images/34.png" alt="">
                    </li>
                    <li class="design-more-wrap design-more-bg">
                      <span>
                        MORE
                        <img src="images/ic_arrow_forward_24px.svg">
                      </span>
                    </li>
                  </ul>
                </li>
              </ul>

這個範例程式碼有很多li及img 那如果每個li及img樣式都不同的話，通常都要給他很多個不同的class去給他css，不然寫一樣的class就會同時影響
這時候我們只需要：

.container-classic .classic-ul li:nth-child(odd) img:first-child {
margin-right: 24px;
}

.container-classic .classic-ul li:nth-child(even) img:last-child {
margin-left: 24px;
}

如上面的程式碼，可以給他 child 這個語法去選擇第幾個的li或是第幾個img針對所選取的li、img去做css樣式，這樣就不會影響囉!!!
只要在要寫的html標籤在加上：

:last-child 最後一個html標籤
:first-child 第一個html標籤
:nth-child(even) 偶數html標籤
:nth-child(odd) 單數html標籤

就能輕易的去做css樣式了，可以省下一些思考css class取名的時間，當然是要在同一個區塊才能去做設定囉~:)
除了上述選擇器，還有更多的選擇器的樣式方法，就依專案畫面的需求去決定怎麼寫囉!