[鼠年全马铁人挑战] Week12 - 超新手学习笔记：CSS 选择器 - child

又过了一週啦~
自从参加了切版直播班就更忙碌了
这次的切版作业也学了很多以前没学过的语法
这週来记录一下新学到的 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取名的时间，当然是要在同一个区块才能去做设定啰~:)
除了上述选择器，还有更多的选择器的样式方法，就依专案画面的需求去决定怎么写啰!