關於部落格
繪圖 | 食記 | Web前端技術 | HTML | CSS | JavaScript 研究
  • 327534

    累積人氣

  • 128

    今日人氣

    3

    追蹤人氣

常用的 CSS pseudo class (CSS偽類) 教學與練習 - PART2

美妙的 Css pseudo element — 前面 & 後面

  • :before
  • :after

先說明一下,這二個偽類的使用,你可能會看過 :before::before 二種寫法(冒號1個與2個),二種都是正確的,前面帶2個冒號的寫法是 W3C 在 CSS3 之後變更規範,都是可以用的。但縱使絕大多數的 browser 都認得兩種寫法,凡事總有例外,微軟的 IE8 不認識 :: 的用法……因此若你要用在線上的專案並且有可能需要支援 IE8,推薦寫1個冒號的型式吧。

那麼就先來試一下這二個怎麼用吧!

HTML

<h1>我的前面和後面有鬼</h1>

CSS

h1:before {
    content: "小鬼A";
}
h1:after {
    content: "小鬼B";
}

Result

我的前面和後面有鬼

看完上例,可以清楚知道 :before:after 就是在指定的 selector 前方/後方添加額外的內容,內容要寫在 content: ""; 裡面,此例我們寫了字元。

然而 content: ""; 裡面可放的不只是字元,也可以是其他的東西。

  • 字元 string
  • 圖片
  • 空值
  • 計數器

接著來練習塞圖片吧,請看下例

HTML

<h1>我的前方有放大鏡</h1>

CSS

h1:before {
    content: url("path/to/your/img.jpg");
}

Result

我的前方有放大鏡

很好,我沒用到 img tag 就在標題前方塞了個隱形的圖片,其實就跟用 css 設定 selector 的 background-image: url(); 寫法類似喔。那計數器呢,如何使用?

HTML

<ul>
    <li>選項</li>
    <li>選項</li>
    <li>選項</li>
</ul>

CSS

ul {
    counter-reset: li; /* 啟動 counter */
}
ul li:after {
    content: counter(li); /* 內容塞 counter */
    counter-increment: li; /* 遞增 counter */
}
  • 選項
  • 選項
  • 選項

大概就是這樣用, counter 可以做的事情其實還有更多,鑑於本篇主要在介紹 css pseudo class,就不再贅述,有想研究 counter 使用法的人可至 W3C文件 去查看哦

:before content 設為空值?

接下來要進階一點了,以上提到 :before/:after 的 content: 也可以設空值,那你接著會問:「留空值干嘛?那不就跟沒設一樣嗎」。沒錯,的確是這樣,那在偽元素里面塞空值的意義在哪裡?

偽元素的預設是不存在的,你無法對一個不存在的 element 做 CSS 的裝飾,若你想要它存在的話,那麼你必須設置 content: ""; 如此一來瀏覽器才會意識到它(偽元素)的存在……

還是不好懂?那直接看範例吧,我有兩個div,一個 alpha 一個 beta,二個同樣皆有設置 :before 而且我想將它(:before) 用css做成一個 20px 正方形

HTML

<div class="div d1">
    div alpha
</div>
<div class="div d2">
    div beta
</div>

CSS

.div {
    background-color: #DD0000;
    color: #FFFFFF;
    padding: 10px;
}
.d1:before {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #FDAF35;
}
.d2:before {
    content: ""; /* Point */
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #FDAF35;
}

Result

alpha
beta

看到差異了嗎?有設置 content: ""; 的 beta DIV 成功 render 成我們理想中的樣子,偽元素變成一個方塊。
然而CSS設置99%一樣的 aplha DIV 卻好像什麼都沒設似的,因為它沒有設定 content: "";

重點歸納

偽元素 css pseudo element 不只是能填入內容,它也可以被當成一般的 HTML Element 來做 CSS 的裝飾,把它變成圓圈、方塊、三角形(現在你知道純CSS漫畫式對話框怎麼做了!)

你好,我是小偷,我在找*空門*,沒有人在家的房子(抖)

  • selector:empty{ properties }

哈哈好啦我承認很冷…… :empty 這個偽類的用法很好猜,就是要鎖定 一個沒有任何內容空空如也的Element

像是 <div></div> 或是 <p></p>

HTML

<div>我有字</div>
<div>我也有</div>
<div></div>
<div><p></p></div>
<div></div>
<div>
</div>

CSS

div {
    border: 1px solid #00EE00; /* 正常是綠框 */
}
div:empty {    
    border: 1px solid #EE0000;
    /* Point: 沒內容的傢伙就給它畫紅線! */
}

Result

我有字
我也有

第四個 div 雖然也沒有內容,但因為它底下有一個空的 <p/><p> 所以在判別上 :empty 也是不承認的喔,是綠框。

第五個 div 沒內容,但塞了個 HTML 註解 :empty 是算的
第六個 div 沒內容,但 div 起始和結尾有斷行→結果被判為... 非 :empty !!

結論

:empty只認100%空,或是只有註解,且不能有斷行的 element

別躲了,我就是指定你 — :target

  • selector:target

呼!最後一個了……這個偽元素很新潮,算是有點冷,但如果靈活運用在適合的地方,也許可以少寫一點 javascript code(?)

我會這樣來形容這一個偽類,它代表目前頁面被 :target 到的 element,而 :target 到又是什麼意思,呃……舉例來說就像 Ahchor 錨點連結 <a href="#goal">run</a> 當這個 link 被點下去之後, browser 的 url 就會變成 url#goal ,而這個頁面中 id=goal 的 element 就算是 :target 。來玩一下範例吧。

HTML

<div class="box" id="box1">
    <p>哇!你找到第一個盒子</p>
</div>
<div class="box" id="box2">
    <p>唷,我是第二個盒子</p>
</div>
<div class="box" id="box3">
    <p>咦,我是第三個</p>
</div>
<div class="tab">
    <a href="#box1">box1</a>
    <a href="#box2">box2</a>
    <a href="#box3">box3</a>
</div>

CSS

.box {
    display: none;
}
.box:target {
    display: block;
}

Result

哇!你找到第一個盒子

唷,我是第二個盒子

咦,我是第三個

    box1     box2     box3

Wait, 你一定覺得這不就是很瞎的 tab 切換功能嗎? javascript 幾行就可以搞定了,哈哈的確是。但用 :target 有個好處,就是每一次點擊因為 url 是有變動過的,在 browser 的 history 其實認定他是跳頁了,你可以直接按上一頁或下一頁來返回/前進到不同的區塊,若是用 Javascript 來實做,要做的功夫還不少,你得在 url location 帶參數,並且使用 HTML5 history pushstate 之類的紀錄……

不過啊,因為 href=#targetID 錨點原本設計是在一個 document 中跳至特定區塊,所以點了之後,它會在畫面上跳動,這一點倒是比較討厭的(可以用 Javascript 消除這預設的行為,但那又是另一個故事,不在本篇討論了)

哈,總算是把 Css pseudo class/element 練習與實作 Part2 給生出來了,雖然寫得沒有很深入,但仍希望對一些CSS新手有一點點幫助啦

Browser Capabilities

以上介紹的這四種偽類/偽元素,在各大瀏覽器的最新版本都已經完整支援,詳細 Support 內容可至 Caniuse.com 來查詢

The End

延伸閱讀

參考資源 References

相簿設定
標籤設定
相簿狀態