CSS Selectors第一章,CSS選擇器的基本介紹,正確的將CSS套用到你的原件上

當開始接觸一些比較大一點點的專案,就開始需要用到不同的CSS Selectors來幫助我們正確的選到,我們所需要的元件,而且也能整理我們的程式碼,把有相同規則的內容統整再一起,方便我們後續的維護

CSS Selectors

是用於查找或選擇要設置的HTML樣式,將我們所編輯的CSS內容套用到這些HTML上,選擇器由於有很多的方式,大類分為五種,後續依照這五種再依序做說明

  • 基本選擇器(Simple selectors)
  • 組合選擇器(Combinator selectors)
  • 偽類選擇器(Pseudo-class selectors) 
  • 偽元素選擇器(Pseudo-elements selectors)
  • 屬性選擇器(Attribute selectors)

基本選擇器(Simple selectors)

這是最常用也是最基本的選擇方式,依照選擇方式還可以再細分為

  • 通用選擇器(universal selector)
  • 標籤選擇器(Type selector)
  • 類別選擇器(Class selector)
  • ID選擇器(ID selector)

通用選擇器(universal selector)

用於直接設定所有元素,使用”*”將代表全部的的元素

範例:所有顏色為白色

*{

        color:#FFF;

}

標籤選擇器(Type selector)

用於直接選取HTML標籤,那整個程式中相同的標籤都將被設定

範例:所有H2標籤設定為字體大小為25px

h2{

        font-size: 25px;

}

類別選擇器(Class selector)

針對特定的class標籤設定相同的CSS,不受標籤限制,只要有相同calss都將被設定

範例:設定開頭、中間、跟底部的區塊,都是950px,左右兩邊都留25px的距離,當作基本設定的排版,給他們class命名為container,並且CSS編輯時針對該class前面加” . “,就是” . container “

HTML

    <head class=”container”></head>

    <div class=”container”></div>

    <footer class=”container”></footer>

CSS

        .container {

            width: 950px;

            margin: 0 25px;

        }

ID選擇器(ID selector)

ID一般用於Java Script的設定,特性:是一個文件中,ID唯一的。意思是指ID在整個程式碼中,只會出現在一個地方,那如果想針對這個ID的部分編輯CSS,可使用ID選擇器

 範例:想設定id=”nav-list”的元件,多外框編輯,就在CSS選擇時加個#,就是” #nav-list”

HTML

<nav id=”nav-list”></nav>

CSS

        #nav-list {

            border: 1px solid black;

        }

組合選擇器(Combinator selectors)

有時候寫一寫會發現,某些東西的規則差不多,而且我們都需要將他們寫同樣的內容,但如果將他們每一個都命名,且針對每一個都去設定就很難在之後進行整理跟維護,所以就可以透過組合選擇器他們找出來一起調整

這當中還可以細分為

  • 後代選擇器(Descendant combinator)
  • 子代選擇器(Child combinator)
  • 一般兄弟選擇器(General sibling combinator)
  • 相鄰兄弟選擇器(Adjacent sibling combinator)

後代選擇器(Descendant combinator)

html都是巢狀,所以是一層包一層的結果,如果我們想要選擇下層的標籤內容,可以使用後代選擇方式

語法是:在上層跟下層中間加上一個”空白”

範例:想要將h2改變顏色,在上層跟下層中間加上一個”空白”,在範例中使用了後代選擇器以及基本選擇器中的類別選擇器作範例

HTML

    <header class=”top”>

        <div class=”h2-container”>

            <h2 class=”h2-font”>我是h2</h2>

        </div>

    </header>

CSS (請一個一個輪流貼上)

(一)

        .top h2 {

            color: blue;

        }

(二)

        .h2-container h2 {

            color: red;

        }

(三)

        .h2-font {

            color: burlywood;

        }

透過這樣的觀察,我們發現即便是底下兩層也能選擇的到,這些結果都能看的到h2都會被改變顏色,可以依照實際寫程式時做選擇

子代選擇器(Child combinator)

跟後代差不多概念,但不同的是,只有下一層會被選取

語法是:兩個上下層中間增加”>”

範例:用跟剛剛相同的範例,要選取子代要用的是”>”,用上上層跟上層來定位h2,並改變它的顏色

HTML

    <header class=”top”>

        <div class=”h2-container”>

            <h2 class=”h2-font”>我是h2</h2>

        </div>

    </header>

CSS(請一個一個輪流貼上)

(失敗)

        .top>h2 {

            color: blue;

        }

(成功)

        .h2-container > h2 {

            color: red;

        }

透過這樣的觀察,我們發現只有父子關係的才會被選到,隔一代是不可以選擇的

一般兄弟選擇器(General sibling combinator)

只要相同的層級,並且順位在自己後面,就可以使用一般兄弟選擇器,這裡指的不是父層或是子層,而是跟自己並排的

語法是:兩個中間增加”~”

HTML

    <p>123</p>

    <div>456</div>

    <h2>789</h2>

    <p>11111111111</p>

CSS

        div~p {

            color: red;

        }

從這裡可以看到,只有最後的p變成紅色,因為第一個p是在div之前,所以那個不能算,只有在後面的p才可以變色,而且不用緊跟再一起

相鄰兄弟選擇器(Adjacent sibling combinator)

只要相同的層級,並且緊跟在後,就可以使用相鄰兄弟選擇器,這裡指的不是父層或是子層,而是跟自己並排的

語法是:兩個中間增加”+”

HTML

    <p>123</p>

    <div>456</div>

    <p>新增一個緊貼的弟弟</p>

    <h2>789</h2>

    <p>11111111111</p>

CSS

        div+p {

            color: red;

        }

從這可以發現,只有緊跟在div後面的p,才有做出反應,其他的部分都沒改變

偽類選擇器(Pseudo-class selectors) 

這類的選擇方式,是比較特殊的動作,有些是使用者動作,有些是從本身結構,行為去選擇,例如當滑鼠在元素上頭時、找到所有兄弟的第一個…等

語法是:標籤後增加”:”

在細分為:

  • 語言偽類Linguistic pseudo-classes
  • 位置偽類Location pseudo-classes
  • 使用者操作偽類User action pseudo-classes
  • 時間維度偽類Time-dimensional pseudo-classes
  • 資源狀態偽類Resource state pseudo-classes
  • 輸入偽類The input pseudo-classes
  • 樹結構偽類Tree-structural pseudo-classes

偽元素選擇器(Pseudo-elements selectors)

有點像是偽類選擇器,但偽元素可以操作更細微的部分,比如說操控項目中的第一行,項目中的第一個字母…等。或是使用標記或是選擇其前後的元素

語法是:標籤後增加”::”

  • 第一行偽元素The ::first-line Pseudo-element
  • 第一個字偽元素The ::first-letter Pseudo-element
  • 偽元素之前的 The ::before Pseudo-element
  • 偽元素之後的The ::after Pseudo-element
  • 標記的偽元素The ::marker Pseudo-element
  • 選擇的偽元素The ::selection Pseudo-element

屬性選擇器(Attribute selectors)

這個用法,是針對某些特定屬性的值去做選擇,並延伸出各種用法

語法是:將要選擇屬性的部分加上”[]”

  • CSS [attribute] Selector
  • CSS [attribute=”value”] Selector
  • CSS [attribute~=”value”] Selector
  • CSS [attribute|=”value”] Selector
  • CSS [attribute^=”value”] Selector
  • CSS [attribute$=”value”] Selector
  • CSS [attribute*=”value”] Selector

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *