symbols()
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Hàm symbols() trong CSS cho phép định nghĩa kiểu bộ đếm nội tuyến trực tiếp như một giá trị của các thuộc tính chẳng hạn như list-style, cung cấp một giải pháp thay thế đơn giản hơn nhưng ít mạnh mẽ hơn so với phương pháp @counter-style khi định nghĩa kiểu bộ đếm.
Không giống như @counter-style, định nghĩa kiểu bộ đếm có thể tái sử dụng, symbols() là ẩn danh (tức là chỉ có thể dùng một lần). Hàm này chấp nhận chuỗi và hình ảnh làm giá trị. Trong khi đó, bộ mô tả symbols của @counter-style cũng chấp nhận các định danh.
Cú pháp
css
symbols() = symbols( <symbols-type>? [ <string> | <image> ]+ );
<symbols-type> có thể là một trong các giá trị sau:
cyclic: Hệ thống lặp qua các giá trị đã cho theo thứ tự định nghĩa, và quay lại đầu khi đến cuối.numeric: Hệ thống diễn giải các giá trị đã cho như các đơn vị liên tiếp của hệ thống đánh số theo vị trí.alphabetic: Hệ thống diễn giải các giá trị đã cho như các chữ số của hệ thống đánh số chữ cái, giống hệ thống đánh số theo vị trí nhưng không có0.symbolic: Hệ thống lặp qua các giá trị, in thêm chúng mỗi vòng (một lần cho vòng đầu tiên, hai lần cho vòng thứ hai, v.v.).fixed: Hệ thống lặp qua các giá trị đã cho một lần, sau đó quay về số Ả Rập.
Cú pháp chính thức
<symbols()> =
symbols( <symbols-type>? [ <string> | <image> ]+ )
<symbols-type> =
cyclic |
numeric |
alphabetic |
symbolic |
fixed
<image> =
<url> |
<image()> |
<image-set()> |
<cross-fade()> |
<element()> |
<gradient>
<image()> =
image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-set()> =
image-set( <image-set-option># )
<cross-fade()> =
cross-fade( <cf-image># )
<element()> =
element( <id-selector> )
<image-tags> =
ltr |
rtl
<image-src> =
<url> |
<string>
<image-set-option> =
[ <image> | <string> ] [ <resolution> || type( <string> ) ]?
<cf-image> =
[ <image> | <color> ] &&
<percentage [0,100]>?
<id-selector> =
<hash-token>
Ví dụ
HTML
html
<ol>
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
</ol>
CSS
css
ol {
list-style: symbols(cyclic "*" "†" "‡");
}
Kết quả
Thông số kỹ thuật
| Specification |
|---|
| CSS Counter Styles Level 3 # symbols-function |
Khả năng tương thích trình duyệt
Xem thêm
- Bộ mô tả
@counter-style:system,symbols,additive-symbols,prefix,suffix,range,pad,speak-as,fallback - Thuộc tính kiểu danh sách:
list-style,list-style-type - Mô-đun CSS counter styles
- Mô-đun CSS lists and counters