negative

Cú pháp

/* Một giá trị <symbol> */
negative: "--"; /* Thêm '--' trước nếu giá trị bộ đếm là âm */

/* Hai giá trị <symbol> */
negative: "(" ")"; /* Thêm '(-' trước và ')' sau nếu giá trị bộ đếm là âm */

Giá trị

Descriptor negative chấp nhận tối đa hai giá trị <symbol>.

<symbol>

Nếu chỉ có một giá trị được chỉ định, nó sẽ được thêm vào trước biểu diễn bộ đếm khi giá trị bộ đếm là âm. Nếu có hai giá trị được chỉ định, giá trị đầu tiên được thêm vào trước và giá trị thứ hai được thêm vào sau biểu diễn bộ đếm khi giá trị bộ đếm là âm.

Mô tả

Nếu giá trị bộ đếm là âm, <symbol> được chỉ định cho descriptor negative sẽ được thêm vào trước biểu diễn bộ đếm, thay thế dấu - mặc định cho các giá trị âm. <symbol> thứ hai, nếu được chỉ định, sẽ được thêm vào sau biểu diễn bộ đếm.

Descriptor negative có liên quan trong hai trường hợp: nếu kiểu bộ đếm có giá trị system là symbolic, alphabetic, numeric và additive và số đếm là âm; và nếu giá trị system là extends và kiểu bộ đếm được mở rộng tự thân sử dụng dấu âm. Đối với các hệ thống không hỗ trợ giá trị bộ đếm âm, việc chỉ định descriptor negative không có hiệu lực và bị bỏ qua.

Định nghĩa chính thức

Cú pháp chính thức

negative = 
  <symbol> <symbol>?  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<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ụ

Hiển thị bộ đếm âm

Ví dụ này mở rộng kiểu danh sách decimal. Descriptor negative được dùng để thêm (- và ) trước và sau các giá trị bộ đếm âm.

HTML

<ol start="-3">
  <li>Negative three</li>
  <li>Negative two</li>
  <li>Negative one</li>
  <li>Zero</li>
  <li>One</li>
</ol>

CSS

@counter-style neg {
  system: extends decimal;
  negative: "(-" ")";
  suffix: ": ";
}

ol {
  list-style: neg;
}

Kết quả

Tiền tố và hậu tố được liệt kê làm giá trị của descriptor negative chỉ được thêm vào marker khi giá trị bộ đếm nhỏ hơn không.

Đặc tả kỹ thuật

Tương thích trình duyệt

Xem thêm

• Các descriptor của @counter-style: system, symbols, additive-symbols, prefix, suffix, range, pad, speak-as, fallback
• Các thuộc tính kiểu danh sách: list-style, list-style-image, list-style-position
• Hàm symbols() để tạo kiểu bộ đếm ẩn danh
• Module CSS counter styles
• Module CSS lists and counters