Lớp giả CSS

Tìm hiểu kiến thức cơ bản về CSS Pseudo Classes

Các lớp giả là các từ khóa được xác định trước được sử dụng để chọn một phần tử dựa trêntiểu banghoặc để nhắm mục tiêu một đứa trẻ cụ thể.

Họ bắt đầu với mộtdấu hai chấm :.

Chúng có thể được sử dụng như một phần của bộ chọn và chúng rất hữu ích để tạo kiểu cho các liên kết đang hoạt động hoặc đã truy cập, chẳng hạn như thay đổi kiểu khi di chuột, tiêu điểm hoặc nhắm mục tiêu con đầu tiên hoặc các hàng lẻ. Rất tiện dụng trong nhiều trường hợp.

Đây là những lớp giả phổ biến nhất mà bạn có thể sẽ sử dụng:

Lớp giả Mục tiêu
:active một phần tử đang được kích hoạt bởi người dùng (ví dụ: được nhấp vào). Chủ yếu được sử dụng trên các liên kết hoặc nút
:checked hộp kiểm, tùy chọn hoặc các loại đầu vào radio được bật
:default mặc định trong một tập hợp các lựa chọn (như, tùy chọn trong một lựa chọn hoặc các nút radio)
:disabled một phần tử bị vô hiệu hóa
:empty một phần tử không có con
:enabled một phần tử được kích hoạt (đối lập với:disabled)
:first-child đứa con đầu lòng của một nhóm anh chị em
:focus phần tử có tiêu điểm
:hover một phần tử di chuột
:last-child đứa con cuối cùng của một nhóm anh chị em
:link một liên kết chưa được truy cập
:not() bất kỳ phần tử nào không khớp với bộ chọn được chuyển. Ví dụ:not(span)
:nth-child() một phần tử phù hợp với vị trí được chỉ định
:nth-last-child() một phần tử phù hợp với vị trí cụ thể, bắt đầu từ cuối
:only-child một phần tử không có anh chị em nào
:required một phần tử biểu mẫu vớirequiredtập thuộc tính
:root Đại diện chohtmlthành phần. Nó giống như nhắm mục tiêuhtml, nhưng nó cụ thể hơn. Hữu ích trongBiến CSS.
:target phần tử khớp với phân đoạn URL hiện tại (để điều hướng bên trong trang)
:valid các phần tử biểu mẫu đã xác thực thành công phía máy khách
:visited một liên kết đã được truy cập

Hãy làm một ví dụ. Thực ra là một cái chung. Bạn muốn tạo kiểu cho một liên kết, vì vậy bạn tạo một quy tắc CSS để nhắm mục tiêuathành phần:

a {
  color: yellow;
}

Mọi thứ dường như hoạt động tốt, cho đến khi bạn nhấp vào một liên kết. Liên kết trở lại màu được xác định trước (xanh lam) khi bạn nhấp vào liên kết đó. Sau đó, khi bạn mở liên kết và quay lại trang, lúc này liên kết có màu xanh lam.

Tại sao điều đó xảy ra?

Bởi vì liên kết khi được nhấp vào sẽ thay đổi trạng thái và đi vào:activetiểu bang. Và khi nó được truy cập, nó ở:visitedtiểu bang. Mãi mãi, cho đến khi người dùng xóa lịch sử duyệt web.

Vì vậy, để làm cho liên kết có màu vàng một cách chính xác trên tất cả các trạng thái, bạn cần viết

a,
a:visited,
a:active {
  color: yellow;
}

:nth-child()xứng đáng được đề cập đặc biệt. Nó có thể được sử dụng để nhắm mục tiêu trẻ em lẻ hoặc thậm chí với:nth-child(odd):nth-child(even).

Nó thường được sử dụng trong danh sách để tô màu các dòng lẻ khác với các dòng chẵn:

ul:nth-child(odd) {
  color: white;
	background-color: black;
}

Bạn cũng có thể sử dụng nó để nhắm mục tiêu 3 phần tử con đầu tiên của một phần tử có:nth-child(-n+3). Hoặc bạn có thể tạo kiểu 1 trong mỗi 5 phần tử với:nth-child(5n).

Một số lớp giả chỉ được sử dụng để in, như:first,:left,:right, vì vậy bạn có thể nhắm mục tiêu trang đầu tiên, tất cả các trang bên trái và tất cả các trang bên phải, thường được tạo kiểu hơi khác một chút.

Tải xuống miễn phí của tôiSổ tay CSS


Các hướng dẫn css khác: