list-style

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

Thuộc tính viết tắt list-style trong CSS cho phép bạn đặt tất cả các thuộc tính kiểu danh sách cùng một lúc.

Try it

list-style: square;

list-style: inside;

list-style: url("/shared-assets/images/examples/rocket.svg");

list-style: none;

list-style: georgian inside url("/shared-assets/images/examples/rocket.svg");

list-style: georgian outside url("/non-existent.svg");

<section class="default-example" id="default-example">
  <div>
    <p>NASA Notable Missions</p>
    <ul class="transition-all" id="example-element">
      <li>Apollo</li>
      <li>Hubble</li>
      <li>Chandra</li>
      <li>Cassini-Huygens</li>
      <li>Spitzer</li>
    </ul>
  </div>
</section>

.default-example {
  font-size: 1.2rem;
}

#example-element {
  width: 100%;
  background: #be094b;
  color: white;
}

section {
  text-align: left;
  flex-direction: column;
}

hr {
  width: 50%;
  color: lightgray;
  margin: 0.5em;
}

.note {
  font-size: 0.8rem;
}

.note a {
  color: #009e5f;
}

@counter-style space-counter {
  symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D";
  suffix: " ";
}

Các giá trị của thuộc tính này được áp dụng cho các mục danh sách, bao gồm các phần tử <li> và các phần tử có display: list-item;. Vì thuộc tính này được kế thừa, nó có thể được đặt trên phần tử cha (thường là <ol> hoặc <ul>) để áp dụng cùng một kiểu danh sách cho tất cả các mục lồng nhau.

Các thuộc tính thành phần

Thuộc tính này là viết tắt cho các thuộc tính CSS sau:

Cú pháp

css

/* type */
list-style: square;

/* image */
list-style: url("../img/shape.png");

/* position */
list-style: inside;

/* hai giá trị */
list-style: georgian outside;
list-style: url("img/pip.svg") inside;

/* ba giá trị */
list-style: lower-roman url("img/shape.png") outside;

/* Giá trị từ khóa */
list-style: none;

/* Giá trị toàn cục */
list-style: inherit;
list-style: initial;
list-style: revert;
list-style: revert-layer;
list-style: unset;

Thuộc tính list-style được chỉ định là một, hai hoặc ba giá trị theo bất kỳ thứ tự nào. Nếu cả list-style-type và list-style-image đều được đặt, list-style-type được dùng làm dự phòng nếu ảnh không khả dụng.

Giá trị

list-style-type: Một <counter-style>, <string>, hoặc none. Nếu bỏ qua trong viết tắt, giá trị mặc định disc được sử dụng. Xem list-style-type.
list-style-image: Một <image> hoặc none. Nếu bỏ qua, giá trị mặc định none được sử dụng. Xem list-style-image.
list-style-position: Là inside hoặc outside. Nếu bỏ qua, giá trị mặc định outside được sử dụng. Xem list-style-position.
none: Không sử dụng kiểu danh sách nào.

Định nghĩa hình thức

Initial value	as each of the properties of the shorthand: `list-style-type`: `disc` `list-style-position`: `outside` `list-style-image`: `none`
Applies to	list items
Inherited	yes
Computed value	as each of the properties of the shorthand: `list-style-image`: The keyword `none` or the computed <image> `list-style-position`: as specified `list-style-type`: as specified
Animation type	as each of the properties of the shorthand: `list-style-image`: discrete `list-style-position`: discrete `list-style-type`: discrete

Cú pháp hình thức

list-style = 
  <'list-style-position'>  ||
  <'list-style-image'>     ||
  <'list-style-type'>      

<list-style-position> = 
  inside   |
  outside  

<list-style-image> = 
  <image>  |
  none     

<list-style-type> = 
  <counter-style>  |
  <string>         |
  none             

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<counter-style-name> = 
  <custom-ident>  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

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

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

Khả năng tiếp cận

Safari không nhận dạng danh sách có thứ tự hay không có thứ tự là danh sách trong cây khả năng tiếp cận nếu chúng có giá trị list-style là none, trừ khi danh sách được lồng trong phần tử điều hướng <nav>. Hành vi này là có chủ ý và không được coi là lỗi.

Để đảm bảo danh sách được thông báo là danh sách, hãy thêm role="list" vào các phần tử <ol> và <ul>, đặc biệt nếu danh sách không được lồng trong <nav>. Điều này khôi phục ngữ nghĩa danh sách mà không ảnh hưởng đến thiết kế:

html

<ul role="list">
  <li>An item</li>
  <li>Another item</li>
</ul>

Nếu role ARIA không phải là tùy chọn cho mã của bạn, có thể dùng CSS thay thế. Thêm nội dung giả không rỗng như văn bản hoặc hình ảnh trước mỗi mục danh sách có thể khôi phục ngữ nghĩa danh sách, nhưng ảnh hưởng đến giao diện trực quan. Safari xác định xem nội dung giả được thêm vào có đủ như nội dung có thể tiếp cận hay không, khôi phục ngữ nghĩa danh sách nếu có. Nói chung, Safari coi văn bản và hình ảnh là đủ, đó là lý do tại sao content: "+ "; hiển thị bên dưới hoạt động (nhưng yêu cầu tạo kiểu thêm để không ảnh hưởng đến thiết kế).

css

ul {
  list-style: none;
}

ul li::before {
  content: "+ ";
}

Khai báo content: ""; (chuỗi rỗng) bị bỏ qua, cũng như các giá trị content chỉ chứa khoảng trắng, chẳng hạn như content: " ";.

Các cách giải quyết CSS này chỉ nên được sử dụng khi không có giải pháp HTML nào khả dụng, và chỉ sau khi kiểm tra để đảm bảo chúng không dẫn đến các hành vi bất ngờ có thể tác động tiêu cực đến trải nghiệm người dùng.

Ví dụ

Thiết lập kiểu và vị trí danh sách

HTML

html

List 1
<ul class="one">
  <li>List Item1</li>
  <li>List Item2</li>
  <li>List Item3</li>
</ul>
List 2
<ul class="two">
  <li>List Item A</li>
  <li>List Item B</li>
  <li>List Item C</li>
</ul>

CSS

css

.one {
  list-style: circle;
}

.two {
  list-style: square inside;
}

Kết quả

Thông số kỹ thuật

Thông số kỹ thuật
CSS Lists and Counters Module Level 3 # list-style-property

Khả năng tương thích trình duyệt

Xem thêm

Các thuộc tính thành phần: list-style-type, list-style-image, và list-style-position
Phần tử giả ::marker
Mô-đun CSS lists and counters
Mô-đun CSS counter styles

Help improve MDN

Tìm hiểu cách đóng góp

This page was last modified on Jan 1, 1970 by MDN contributors.

Xem trang này trên GitHub • Báo cáo sự cố với nội dung này