CSS 函式 ( 文字與清單計數 )

雖著 CSS 的版本演進，也陸續支援動態取得元素屬性等好用的功能，這篇教學會介紹「文字與清單計數」相關的 CSS 函式，例如 attr()、url()、counter()、counters() 等等，透過動態取得的文字或變數，讓版面的操控更具彈性。

CSS 教學 - CSS 函式 ( 文字與清單 )

「文字與清單計數」的 CSS 函式

下方列出「文字與清單計數」類型的 CSS 函式 ( 目前所有瀏覽器都支援 )：

文字與清單函式	說明
attr()	取得套用該選擇器元素的屬性值。
url()	網址。
counter()	計數器。
counters()	多層計數器。

attr()

「attr()」是「取得套用該選擇器元素的屬性值」CSS 函式，通常會搭配虛擬元素的 content 一同使用，基本寫法如下：

div::before {
  content: attr(name);  /* 讀取 name 屬性數值作為內容文字 */
}
div::after {
  content: "<< " attr(name) " >>";  /* 讀取 name 屬性數值作為內容文字，文字左右加上額外文字 */
}

雖然 W3C 所制定的 attr() 可以將讀取的數值應用於長度、角度、顏色等 CSS 樣式，但很可惜的是目前所有的瀏覽器都「不支援」，不然應該可以大幅減少程式碼，讓版面的設計更加靈活，例如目前並「不支援」下方的寫法：

div {
  width: attr(width px);              /* 讀取 width 屬性數值作為寬度，單位 px */
  background: attr(bg-color, "red");  /* 讀取 bg-color 屬性數值作為背景色，如果沒有就用 red */
}

下方的範例執行後，會使用虛擬元素，將 div 的前方和後方都加上對應屬性的文字。

線上展示：https://codepen.io/oxxo/pen/wvborYW

<!-- HTML 程式碼 -->
<div left="123" right="456">oxxo</div>
<div left="789" right="000">apple</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    margin:10px;
    padding:10px;
  }

  div::before {
    content: attr(left) ", ";
  }

  div::after {
    content: " ," attr(right);
  }
</style>

CSS 教學 - CSS 函式 ( 文字與清單 ) - attr()

url()

「url()」是「網址」CSS 函式，通常應用於「背景圖片、清單圖示、滑鼠游標、外部字體」等需要使用 url 的樣式，使用方法如下：

div {
  background-image: url("oxxo.gif");
  list-style-image: url("../icon/icon-01.jpg");
  content: url("bg.jpg");
  cursor: url("mycursor.cur");
  src: url("google-font.woff");
}
div::before {
  content: " - " url(star.gif);
}

url() 的網址可以「使用引號」或使用「雙引號」或「單引號」包覆，如果網址中有出現「括號、空格或引號」，則必須使用引號包覆，例如下方的寫法都可以正常運作的。

background-image: url(oxxo.gif);   /* 不使用引號 */
background-image: url('oxxo.gif'); /* 使用單引號 */
background-image: url("oxxo.gif"); /* 使用雙引號 */

下方的範例執行後，畫面中的 div 會加入背景圖片，清單則會使用圖片作為清單標記。

線上展示：https://codepen.io/oxxo/pen/mdYOqdV

<!-- HTML 程式碼 -->
<div></div>
<ul>
  <li>oxxo</li>
  <li>banana</li>
  <li>orange</li>
  <li>papaya</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 300px;
    height: 200px;
    background-image: url(https://img.freepik.com/free-vector/minimal-geometric-stripe-shape-background_1409-1014.jpg);
  }
  li {
    list-style: url(https://cdn-icons-png.freepik.com/16/11694/11694600.png);
  }
</style>

CSS 教學 - CSS 函式 ( 文字與清單 ) - url()

url() 除了使用網址作為參數，也支援「base64 編碼」或「SVG 程式碼」的圖片內容，下方的範例執行後，會用這兩種方式呈現背景圖片。

線上展示：https://codepen.io/oxxo/pen/gOJLXaw

<!-- HTML 程式碼 -->
<div class="a"></div>
<div class="b"></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 225px;
    height: 225px;
    border: 1px solid black;
    margin: 5px;
  }
  .a {
    background-image: url(data:image/png;base64,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)
  }
  .b {
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="225px" height="225px" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path style="opacity:1" fill="%23fffefd" d="M -0.5,-0.5 C 74.5,-0.5 149.5,-0.5 224.5,-0.5C 224.5,74.5 224.5,149.5 224.5,224.5C 149.5,224.5 74.5,224.5 -0.5,224.5C -0.5,149.5 -0.5,74.5 -0.5,-0.5 Z"/></g><g><path style="opacity:1" fill="%23ff5916" d="M 67.5,170.5 C 65.9814,173.526 65.3148,176.859 65.5,180.5C 65.5034,183.025 65.8367,185.359 66.5,187.5C 67.6737,196.514 71.507,204.181 78,210.5C 78.6877,211.332 78.521,211.998 77.5,212.5C 48.2324,195.34 32.0657,169.674 29,135.5C 27.6436,114.26 31.9769,94.26 42,75.5C 42.6667,74.1667 43.3333,74.1667 44,75.5C 46.6601,86.484 52.1601,95.8173 60.5,103.5C 60.56,104.043 60.8933,104.376 61.5,104.5C 61.8333,103.667 62.1667,102.833 62.5,102C 62.0542,98.6499 61.3875,95.4833 60.5,92.5C 60.2665,87.1053 60.5998,81.772 61.5,76.5C 62.4915,71.9496 63.4915,67.2829 64.5,62.5C 74.5133,33.6547 94.1799,14.8213 123.5,6C 124.833,5.33333 126.167,5.33333 127.5,6C 125.539,9.21483 124.373,12.7148 124,16.5C 123.298,25.2032 123.632,33.8698 125,42.5C 128.058,50.2834 131.392,57.9501 135,65.5C 143.853,79.8737 152.187,94.5404 160,109.5C 161.897,115.485 163.73,121.485 165.5,127.5C 177.98,110.853 182.48,92.1865 179,71.5C 200.654,107.867 200.988,144.534 180,181.5C 168.36,199.822 152.194,211.989 131.5,218C 153.158,203.498 160.325,183.665 153,158.5C 150.433,164.069 147.433,169.403 144,174.5C 142.104,176.53 139.937,178.197 137.5,179.5C 137.158,172.876 135.658,166.543 133,160.5C 124.602,147.036 117.269,133.036 111,118.5C 109.524,113.594 108.524,108.594 108,103.5C 92.0711,117.283 86.0711,134.617 90,155.5C 91.8739,162.952 94.0405,170.285 96.5,177.5C 84.6868,173.684 77.3534,165.684 74.5,153.5C 70.7749,158.614 68.4415,164.281 67.5,170.5 Z"/></g><g><path style="opacity:1" fill="%23ff8e66" d="M 64.5,62.5 C 63.4915,67.2829 62.4915,71.9496 61.5,76.5C 61.0439,71.4045 62.0439,66.7378 64.5,62.5 Z"/></g><g><path style="opacity:1" fill="%23ffcbb9" d="M 60.5,92.5 C 61.3875,95.4833 62.0542,98.6499 62.5,102C 62.1667,102.833 61.8333,103.667 61.5,104.5C 60.8933,104.376 60.56,104.043 60.5,103.5C 60.7037,100.082 60.7037,96.4158 60.5,92.5 Z"/></g><g><path style="opacity:1" fill="%23ff895f" d="M 67.5,170.5 C 66.7081,176.13 66.3748,181.797 66.5,187.5C 65.8367,185.359 65.5034,183.025 65.5,180.5C 65.3148,176.859 65.9814,173.526 67.5,170.5 Z"/></g></svg>');
  }
</style>

CSS 教學 - CSS 函式 ( 文字與清單 ) - url() 使用編碼呈現圖片

counter()

「counter()」是「計數器」CSS 函式，具有兩個參數，分別是「計數器名稱」以及「計數器類型」，使用後可以「產生指定格式的計數器數值」，必須搭配清單的「counter-reset」和「counter-increment」樣式屬性使用，基本寫法如下：

li::marker { 
  content: counter(名稱, 類型);
}
li::before { 
  content: counter(名稱, 類型);
}

常用的計數器類型如下表所示：

類型	說明
decimal	阿拉伯數字
decimal-leading-zero	個位數開頭補零阿拉伯數字
lower-alpha	小寫英文字母
lower-greek	小寫希臘字母
lower-roman	小寫羅馬數字
upper-alpha	大寫英文字母
upper-greek	大寫希臘字母
upper-roman	大寫羅馬數字
cjk-ideographic	中文數字
hiragana	日文平假名
katakana	日文片假名
armenian	希臘數字
georgian	喬治亞文
hebrew	希伯來文

下方的範例執行後，會使用 counter() 定義清單的數字標記格式。

線上展示：https://codepen.io/oxxo/pen/dyEOZap

<!-- HTML 程式碼 -->
<ul>
  <li>oxxo</li>
  <li>banana</li>
  <li>apple
    <ul>
      <li>aaa
        <ul>
          <li>xxx</li>
          <li>yyy</li>
          <li>yyy</li>
        </ul>
      </li>
      <li>bbb</li>
      <li>ccc</li>
    </ul>
  </li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
ul {
  counter-reset: oxxo;
  list-style-type: none;
}
li{
  counter-increment: oxxo;
}
li::before {
  content: counter(oxxo, decimal) ' > ';
}
</style>

CSS 教學 - CSS 函式 ( 文字與清單 ) - counter()

counters()

「counters()」是「多層計數器」CSS 函式，具有兩三個參數，分別是「計數器名稱」、「分隔符」以及「計數器類型」，有別於 counter 只能取得「單層」的計數數值，counters() 使用後可以「保留父層數值，並結合新的計數器數值」，必須搭配清單的「counter-reset」和「counter-increment」樣式屬性使用，基本寫法如下：

li::marker { 
  content: counters(名稱, 分隔符, 類型);
}
li::before { 
  content: counters(名稱, 分隔符, 類型);
}

下方的範例執行後，會使用 counters() 定義清單的數字標記格式。

線上展示：https://codepen.io/oxxo/pen/PovbOrQ

<!-- HTML 程式碼 -->
<ul>
  <li>oxxo</li>
  <li>banana</li>
  <li>apple
    <ul>
      <li>aaa
        <ul>
          <li>xxx</li>
          <li>yyy</li>
          <li>yyy</li>
        </ul>
      </li>
      <li>bbb</li>
      <li>ccc</li>
    </ul>
  </li>
  <li>orange</li>
</ul>

<!-- CSS 程式碼 -->
<style>
  ul {
    counter-reset: oxxo;
    list-style-type: none;
  }
  li{
    counter-increment: oxxo;
  }
  li::before {
    content: counters(oxxo, '-', decimal) '、';
  }
</style>

CSS 教學 - CSS 函式 ( 文字與清單計數 ) - counters()

小結

「文字與清單計數」相關的 CSS 函式已經存在許久，特別是 url()，由於太常會用到，甚至會忘記了它也是一種 CSS 函式，此外，雖然目前 attr() 只能應用在基本虛擬元素，但隨著瀏覽器的進步，相信不久的將來就能真正發揮出它的功能囉。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS 函式 ( 文字與清單計數 )

「文字與清單計數」的 CSS 函式

attr()

url()

counter()

counters()

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

變數與函式

文字樣式

元素容器

背景與陰影

排版與定位

清單與表格