iT邦幫忙

1

[鼠年全馬鐵人挑戰] 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取名的時間,當然是要在同一個區塊才能去做設定囉~:)
除了上述選擇器,還有更多的選擇器的樣式方法,就依專案畫面的需求去決定怎麼寫囉!


尚未有邦友留言

立即登入留言