CSS Selectors第二章,偽類選擇器(Pseudo-class selectors) ,正確的將CSS套用到你的原件上

上次有提到一些基本的用法,由於選擇器的種類繁多,偽類選擇器的使用方法比起基本和組合選擇器也比較複雜一點,所以另外拉一個篇幅做紀錄下來

本文會陸續新增,當我有使用上,或是有疑問留言時,會在更新

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

偽類選擇器(Pseudo-class selectors) 

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

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

由於很多並不常用,這裡舉幾個比較常用的例子

:hover

這個選擇器用於將滑鼠停在某個元素上面,即可以對這個行為作出反應,例如:滑鼠停在連結上,滑鼠停在某個區塊上

範例:

首先我們設定有兩個元素在上面,分別有一個div跟一個p夾著a連結

div:

  • 高跟寬100px
  • 外框黑,背景粉
  • class設定text1
  • a連結:
  • class設定text2

HTML

    <div class=”text1″>

        我是text1

    </div>

    <p><a class=”text2″ href=”#”>我是text2</a></p>

CSS

           .text1 {

            display: inline-block;

            height: 100px;

            width: 100px;

            border: 1px solid black;

            background: pink;

        }

        .text1:hover {

            height: 200px;

            width: 200px;

            border: 1px solid black;

            background: green;

        }

        a.text2:hover {

            color: black;

            font-size: 100px;

        }

程式執行結果

分別設定他們被滑鼠選到後:

div:

  • 高跟寬200px
  • 背景變成綠色

a連結:

  • 放大100px
  • 字體改為黑色
我是text1

我是text2

:first-child

被選到的元素中,第一個子元素,這個意思是,當你選取很多重複命名的元素,這些元素排序最上面,也就是第一個會被執行設定的CSS語法

範例:

這裡設定三行text-p的元素,同時選取起來看結果

第二段設定每行p都有兩個span元素

HTML

    <p class=”text-p”>我是第一個P元素</p>

    <p class=”text-p”>我是第二個P元素</p>

    <p class=”text-p”>我是第三個P元素</p>

    <p>我<span class=”text-span”>是第四個</span> <span class=”text-span”>P元素</span></p>

    <p>我是<span class=”text-span”>第五個</span><span class=”text-span”>P元素</span></p>

    <p>我是第<span class=”text-span”>六個</span><span class=”text-span”>P元素</span></p>

CSS

        .text-p:first-child {

            color: red;

            font-size: 50px;

        }

        p .text-span:first-child {

            color: blue;

            font-size: 20px;

        }

程式執行結果

我們從結果看出,text-p的三行當中,只有第一行會被選取,因為加入了:first-child,所以只有第一行變紅色放大

而第二段的則是每一行加入了span,由於我的語法解讀為,我選取的每個P,他們的第一個span得設定CSS,所以只有一行中的第一個被包住的span文字變色放大了

我是第一個P元素

我是第二個P元素

我是第三個P元素

是第四個 P元素

我是第五個P元素

我是第六個P元素

 :lang 

這是用於設定不同語言的特殊規則

範例:

設定兩段文字,中間夾q標籤

HTML

    <p>這是第一段 <q lang=”abc”>的範例</q> ,用於測試用</p>

    <p>這是第二段 <q lang=”def”>的範例</q> ,用於測試用</p>

CSS

        q:lang(def) {

            quotes: “~~~””~~~”;

        }

程式執行結果

這個結果是lang根據設定的文字去追蹤,將雙引號改變成我們需要的符號

發佈留言

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