Pseudo-class empty

Pseudo-class empty thiết lập cách một phần tử trống (không chứa văn bản) sẽ hiển thị.

Cú pháp

cssbộ chọn:empty {

}

Ví dụ

Trong ví dụ này, li cuối cùng là trống, nhưng vẫn sẽ có điểm đánh dấu:

html<ul>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li></li>
</ul>

Результат:

Ví dụ

Hãy thay đổi kiểu cho thẻ li trống:

html<ul>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li></li>
</ul>

cssli:empty {
  border: 1px solid blue;
  list-style-type: circle;
  color: blue;
  width: 100px;
}

Результат:

Ví dụ

Ẩn hoàn toàn các li trống:

html<ul>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li>mục danh sách</li>
  <li></li>
</ul>

cssli:empty {
  display: none;
}

Результат:

Xem thêm