Lớp học - Thủ thuật CSS

Anonim

Bộ chọn lớp trong CSS bắt đầu bằng dấu chấm (.), Như sau:

.class ( )

Bộ chọn lớp chọn tất cả các phần tử có thuộc tính lớp phù hợp.

Ví dụ, phần tử này:

Push Me

được chọn và tạo kiểu như thế này:

.big-button ( font-size: 60px; )

Bạn có thể đặt cho một lớp bất kỳ tên nào bắt đầu bằng chữ cái, dấu gạch ngang (-) hoặc dấu gạch dưới (_). Bạn có thể sử dụng số trong tên lớp, nhưng một số không được là ký tự đầu tiên hoặc ký tự thứ hai sau dấu gạch ngang. Trừ khi bạn phát điên và bắt đầu thoát khỏi các bộ chọn, điều này có thể trở nên kỳ lạ:

.\3A \`\( ( /* matches elements with class=":`(" */ )

Một phần tử có thể có nhiều hơn một lớp:



 This paragraph will get styles from .intro and .blue selectors.

Một phần tử có nhiều lớp được tạo kiểu với các quy tắc CSS cho mỗi lớp. Bạn cũng có thể kết hợp nhiều lớp để chọn các phần tử:

/* only selects elements with BOTH of these classes */ .intro.blue ( font-size: 1.3em; )

Bản trình diễn này cho thấy bộ chọn một lớp khác với bộ chọn kết hợp như thế nào:

Bạn cũng có thể giới hạn bộ chọn lớp cho một loại phần tử cụ thể, đôi khi được gọi là "thẻ đủ điều kiện":

ul.menu ( list-style: none; )

Tính đặc hiệu

Bản thân nó, một bộ chọn lớp có giá trị cụ thể là 0, 0, 1, 0. Nó “mạnh hơn” so với một bộ chọn phần tử (như a ( ):) nhưng kém mạnh hơn một bộ chọn ID (như #header ( )). Tính cụ thể tăng lên khi bạn kết hợp bộ chọn lớp hoặc giới hạn bộ chọn trong một phần tử cụ thể.

Truy cập lớp học bằng JavaScript

Bạn có thể đọc và thao tác các lớp của một phần tử classListtrong JavaScript. Ví dụ, thêm một lớp có thể như sau:

document.getElementById('italicize').classList.add('italic');

Bản trình diễn này cho thấy các ví dụ cơ bản về việc classListsử dụng:

jQuery cũng có phương pháp để tương tác với các lớp, bao gồm .addClass(), .removeClass(), .toggleClass(), và .hasClass().

Thêm thông tin

  • Đọc thông số kỹ thuật W3C cho bộ chọn lớp.
  • Tìm hiểu thêm về tên lớp ngữ nghĩa.
  • Tìm hiểu thêm về tính đặc hiệu.
  • Tìm hiểu về sự khác biệt giữa các lớp và ID.
  • Tìm hiểu về nhiều bộ chọn lớp và tổ hợp bộ chọn lớp / ID.
  • Tìm hiểu về API .classList.
  • Tìm hiểu về thao tác lớp trong jQuery.

Hỗ trợ trình duyệt

Trình duyệt Chrome Safari Firefox Opera I E Android iOS
Bất kì Bất kì Bất kì Bất kì Bất kì Bất kì Bất kì