iT邦幫忙

2023 iThome 鐵人賽

DAY 15
0
Modern Web

前端入門,入門前端系列 第 15

Day15 【前端入門,入門前端】CSS 選取器-基本選取器與組合選取器

  • 分享至 

  • xImage
  •  

前端入門,入門前端。學前端,如標題簡單。

嗨大家好,
關於昨天的class與id不知道大家都熟悉了沒有?class與id非常重要,因為所有我們想要設定的樣式,都需要先選取到指定的標籤才有辦法給予樣式。既然提到了「選取到指定的標籤」,這邊就讓我們來認識一個新的詞彙「選取器」。
什麼是選取器呢?
還記的我們前幾天寫在 <style></style> 裡面的內容嗎?

    <style>
        XXX {

        }
    </style>

這個「XXX」的地方,
要選到標籤,就直接打標籤名
要選到class前面要加「.」,然後再打指定的class名稱
要選到id前面要加「#」,然後再打指定的id名稱

上面這個「XXX」的地方,我們填寫的內容,就叫做「選取器」。
CSS選取器就是用來選擇我們想要調整樣式的 HTML 元素。

選取器有分很多種,就讓我們先來認識一些吧。

為什麼是「先」認識一些呢?噢,因為發文時間要到了,只好「先」認識一些,明天「再」認識一些。
當國小老師學到一項很重要的技能,就是當下課鐘響起,無論課程進行到哪裡,是否有在原本的課程計畫進度內,就是得在30秒內結束這堂課,並讓學生知道,沒有錯老師原本這節課的規劃就是要教到這裡

基本選取器

這些我們前幾天都說過了,快速複習帶過(忘記的可以day13、day14)

1.元素選取器:選取 HTML 標籤名相同的所有元素。

    <style>
        p {
            font-size: 24px;
        }
    </style>

2.類別選取器:選取 class 屬性值相同的所有元素。

    <style>
        .change_font {
            font-size: 24px;
        }
    </style>

3.ID 選取器:選取特定 id 屬性值的元素。

    <style>
        #third {
            font-size: 24px;
        }
    </style>

組合選取器

我們講講幾種常見的符號代表的含意

1.「,」
代表div或p都要

    <style>
        div, p {
            font-size: 24px;
        }
    </style>
    
    <body>
        <div>我是div</div>
        <p>我是p</p>
        <span>我是span</span>
    </body>

https://ithelp.ithome.com.tw/upload/images/20230930/201522906iwxJA7vxv.jpg

2.「空格」
代表先找到div再找到裡面的p

    <style>
        div p {
            font-size: 24px;
        }
    </style>
    
    <body>
        <div>
            <p>我是div裡面的p</p>
        </div>
        <p>我是外面的p</p>
    </body>

https://ithelp.ithome.com.tw/upload/images/20230930/20152290M2CKvCaUre.jpg

3.「>」
代表div中限定第一層子元素的p

    <style>
        div > p {
            font-size: 24px;
        }
    </style>
    
    <body>
        <div>
            <p>我是div裡面的第一層子元素的p</p>
            <article>
                <p>我是div裡面第一層先包article的第二層子元素的p</p>
            </article>
        </div>
    </body>

https://ithelp.ithome.com.tw/upload/images/20230930/20152290M5XeK2CvjC.jpg

4.「+」
代表div的同一層的下一個p

    <style>
        div + p {
            font-size: 24px;
        }
    </style>
    
    <body>
        <p>我是div同一層的上一個p</p>
        <div>
            <p>我是div裡面的第一層子元素的p</p>
        </div>
        <p>我是div同一層的下一個p</p>
        <p>我是div同一層的下二個p</p>
    </body>

https://ithelp.ithome.com.tw/upload/images/20230930/20152290xEX9AH3cxm.jpg

5.「~」
代表div的同一層後面所有的p

    <style>
        div ~ p {
            font-size: 24px;
        }
    </style>
    
    <body>
        <p>我是div同一層的上一個p</p>
        <div>
            <p>我是div裡面的第一層子元素的p</p>
        </div>
        <p>我是div同一層的下一個p</p>
        <p>我是div同一層的下二個p</p>
    </body>

https://ithelp.ithome.com.tw/upload/images/20230930/20152290tBsAa0lVNs.jpg

6.「*」
頁面上所有的標籤元素

    <style>
        * {
            font-size: 24px;
        }
    </style>
    
    <body>
        <div>我是div</div>
        <p>我是p</p>
        <span>我是span</span>
    </body>

https://ithelp.ithome.com.tw/upload/images/20230930/20152290txH3sjUpTx.jpg

當我們的網頁結構越來越複雜,有越來越多標籤互相包覆,透過以上幾種選取器,就可以更順利的直接選取到我們想要的元素了。大家不妨自己練習看看用以上幾種選取器,選到自己想要的元素吧。
我們明天見囉。


上一篇
Day14 【前端入門,入門前端】CSS class 與 id
下一篇
Day16 【前端入門,入門前端】CSS 選取器-屬性選取器
系列文
前端入門,入門前端19
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言