自學日記

學習程式相關知識及學習法

0%

CSS偽元素及偽類選取器

發表於 更新於

CSS偽元素及偽類選取器

談論偽類選取器與偽元素

css3為了區分偽類和偽元素，偽元素採用雙冒號寫法:

常見偽類—:hover、:link、:active、:target、:not()、:focus。
常見偽元素—::first-letter、::first-line、::before、::after、::selection。[color=#7cfc41]

偽類選取器

偽類選取器是由一個「:」冒號作為開頭，而後接著偽類選取器的名稱。
偽類選取器大致又分為:
連結偽類、使用者操作偽類、目標偽類、結構性偽類、UI狀態元素偽類、否定偽類
以下做各個分類偽類選取器介紹:

連結偽類

接於連結<a>之後，分為:link(未訪問過的連結)
及:visited(已訪問過的連結)。

使用者操作偽類

又分為:hover、:focus及:active，:hover為滑鼠游標停於該元素所產生的效果，:focus為表單輸入元素產生的效果，:active為滑鼠點擊時產生的效果。

目標偽類

target即為目標偽類，官方定義是:

**URL 帶有後面跟有錨名稱#(id),指向文件內某個具體的元素。這個被連結的元素就是目標元素(target element)**，即為連結設定:target之後會進行跳轉至某目標元素。

結構性偽類

  1. :root選取根元素
  2. :first-child、:last-child頭尾選取器:分別為選取第一個及最後一個子物件
  3. :first-of-type、:last-of-type首尾分類選取器:分別為選取第一個及最後一個同類別(ex.div、p、h1…)物件
  4. only-child獨子選取器，選取唯一的子物件
  5. :only-of-type類型獨子選取器，選取唯一一個該類型(ex.div、p、h1…)的物件
  6. :nth-child(n)、:nth-last-child(n)，選取(頭/尾)第n個子物件，括號內更詳細應該寫成(an+b)，其中a、b可以自訂數值，而+則是可以變更的運算符號(運算子)，以此進行更多的選取範圍
  7. :nth-of-type(n)、:nth-last-of-type(n)，選取(頭/尾)同類型第n個物件，先依標籤做分類，緊接著再做同類別選取，同樣更詳細括號內可寫成(an+b)，進行更廣泛選取
  8. :empty空值選取器，專門選取空的物件

UI 元素狀態偽類

:enabled、:disabled分別為表單內啟用及禁用狀態元素，常用於<button>，以及另一個偽類:checked，表單使用者選擇的UI元素，意思為表單被勾選時會產生的狀態

否定偽類

:not()，即不選取某元素的選取器

參考文章:
AMOS偽類選取器器
CSS 偽類別選擇器教學範例

偽元素選取器

::before & ::after

::before和::after下特有的content，用於在css渲染中向元素邏輯上的頭部或尾部新增內容。

這些新增不會出現在DOM中，不會改變文件內容，不可複製，僅僅是在css渲染層加入。

所以不要用:before或:after展示有實際意義的內容，儘量使用它們顯示修飾性內容，例如圖示。偽類元素的display是預設值inline，可以通過設定display:block來改變其顯示

舉例：網站有些聯絡電話，希望在它們前加一個icon☎，就可以使用:before偽元素。

content作用

::before和::after必須配合content屬性來使用，content用來定義插入的內容，content必須有值，至少是空。
以下舉例

1
2
3
4
p::after{
    content: "";
    color: blue;
}

content引號內部可插入:

  • string: 使用引號包一段字串，將會向元素內容中新增字串
  • attr(): 通過attr()呼叫當前元素的屬性，比如將圖片alt提示文字或者連結的href地址顯示出來。
  • counter(): 呼叫計數器，可以不使用列表元素實現序號功能。
    配合counter-increment和counter-reset屬性使用：
    h2:before { counter-increment: chapter; content: “Chapter “ counter(chapter) “. “ }
    範例程式碼:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <style>
    body{
        counter-reset: section;
    }
    h1{
        counter-reset: subsection;
    }
    h1:before{
        counter-increment:section;
        content:counter(section) "、";
    }
    h2:before{
        counter-increment:subsection;
        content: counter(section) "." counter(subsection) "、";
    }
    </style>
    ------------------------------------------------
    <body>
    <h1>HTML tutorials</h1>
    <h2>HTML Tutorial</h2>
    <h2>XHTML Tutorial</h2>
    <h2>CSS Tutorial</h2>

    <h1>Scripting tutorials</h1>
    <h2>JavaScript</h2>
    <h2>VBScript</h2>

    <h1>XML tutorials</h1>
    <h2>XML</h2>
    <h2>XSL</h2>

    </body>
    呈現如下:
  • url()/uri(): 用於引用媒體檔案。舉例：“百度”前面給出一張圖片，後面給出href屬性。(雖可以使用，但是無法調整 width&height，不是那麼實用)

偽元素建議用於裝飾性物件(例如icon)，別用於具體意義的文字項目上

利用::before & ::after 心型圖案製作

範例程式碼如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<style>
  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
  }
  .heart::after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart::before {
    content:"" ;
    background-color: pink;
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }
</style>
<div class="heart"></div>

顯示如下:

進階 跳動的心

搭配animation，程式碼如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<style>
  .back {
    position: fixed;
    padding: 0;
    margin: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: white;
    animation-name: backdiv;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }

  .heart {
    position: absolute;
    margin: auto;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: pink;
    height: 50px;
    width: 50px;
    transform: rotate(-45deg);
    animation-name: beat;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  .heart:after {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: 0px;
    left: 25px;
  }
  .heart:before {
    background-color: pink;
    content: "";
    border-radius: 50%;
    position: absolute;
    width: 50px;
    height: 50px;
    top: -25px;
    left: 0px;
  }

  @keyframes backdiv {
    50% {
      background: #ffe6f2;
    }
  }

  @keyframes beat {
    0% {
      transform: scale(1) rotate(-45deg);
    }
    50% {
      transform: scale(0.6) rotate(-45deg);
    }
  }

</style>
<div class="back"></div>
<div class="heart"></div>

顯示如下:
https://codepen.io/shawnliu1012/pen/OJmJPvJ
參考資料:
::before和::after偽元素的用法

::first-line首行選取器

即為選取第一行，為使用後能讓被設定的物件內容第一行呈現為設定的樣子。

::selection 選取狀態偽元素

意思為可設定選取反白後產生的效果，支援的變化為:

  1. color(文字色彩)
  2. background-color(背景色彩)
  3. cursor(滑鼠游標)
  4. caret-color(閃動標點)
  5. outline(外框線)
  6. text-decoration(文字裝飾)
  7. text-emphasis-color(文字加重強調符號色彩)
  8. text-shadow(文字陰影

參考文章:
AMOS 金魚都能懂的CSS選取器