Hướng dẫn css pseudo-class là gì

Question

Nội dung

Nội dung chính Show

Pseudo-classes là gì?
Anchor Pseudo-classes
Pseudo-classes và CSS Classes
Di chuyển chuột vào div
Di chuyển chuột đơn giản
CSS – The :first-child Pseudo-class
Phần tử
đầu tiên phù hợp
Phần tử đầu tiên phù hợp với tất cả phần tử
Tất cả phần tử phù hợp với tất cả “con đầu tiên” phần tử
CSS – The :lang Pseudo-class
Pseudo Classes trong CSS

Pseudo-classes là gì?
Cú pháp
Anchor Pseudo-classes
Pseudo-classes và CSS Classes
Di chuyển chuột vào div
Di chuyển chuột đơn giản
CSS – The :first-child Pseudo-class
Phần tử
đầu tiên phù hợp
Phần tử đầu tiên phù hợp với tất cả phần tử
Tất cả phần tử phù hợp với tất cả “con đầu tiên” phần tử
CSS – The :lang Pseudo-class
Pseudo Classes trong CSS

Pseudo-classes là gì?

Pseudo-Class để xác định trạng thái đặc biệt của một phần tử.
Ví dụ, nó có thể sử dụng để:

Định dạng cho một phần tử khi người dùng di chuột qua nó
Định dạng đường dẫn khi đã và chưa được click vào
Định dạng một phần tử khi muốn gây chú ý vào đó

Cú pháp

Cú pháp của pseudo-classes là:


selector:pseudo-class {
  property: value;
}

Anchor Pseudo-classes

Đường dẫn có thể được hiển thị nhiều cách khác nhau:


/* đường dẫn khi chưa click */
a:link {
    color: #FF0000;
}

/* dường dẫn đã click */
a:visited {
    color: #00FF00;
}

/* di chuyển chuột vào đường dẫn */
a:hover {
    color: #FF00FF;
}

/* đường dẫn đã chọn */
a:active {
    color: #0000FF;
}

Lưu ý: a:hover phải xuất hiện sau a:link và a:visited trong định nghĩa của CSS để tạo ra hiệu ứng. a:active phải xuất hiện sau a:hover trong định nghĩa của CSS để tạo hiệu ứng. Pseudo-class không phân biệt chữ hoa chữ thường.

Pseudo-classes và CSS Classes

Pseudo-classes có thể kết hợp với CSS classes:
Khi bạn di chuyển chuột vào đường link trong ví dụ, màu sắc sẽ thay đổi:


a.highlight:hover {
  color: #ff0000;
}

Di chuyển chuột vào div

Một ví dụ sử dụng pseudo-class :hover trong phần tử

:

div:hover { background-color: blue; }
Di chuyển chuột đơn giản
Di chuyển chuột vào phần tử
để hiển thị một phần tử
(như để giải thích cho một điều gì đó)
p { display: none; background-color: yellow; padding: 20px; } div:hover p { display: block; }
CSS – The :first-child Pseudo-class
Pseudo-class :first-child kết nối một phần tử đặc biệt là “con đầu tiên” của phần tử khác.
Phần tử
đầu tiên phù hợp
Trong ví dụ dưới đây, bộ chọn một vài phần tử
là “con đầu tiên” phù hợp của vài phần tử:
p:first-child { color: blue; }
Phần tử đầu tiên phù hợp với tất cả phần tử
Trong ví dụ dưới đây, bộ chọn phần tử đầu tiên phù hợp với tất cả phần tử
:

p i:first-child { color: blue; }
Tất cả phần tử phù hợp với tất cả “con đầu tiên” phần tử
Trong ví dụ dưới đây, bộ chọn tất cả phần tử phù hợp trong phần tử
là “con đầu tiên” của phần tử khác:
p:first-child i { color: blue; }
CSS – The :lang Pseudo-class
Pseudo-class :lang cho phép bạn định nghĩa một quy tắc đặc biệt cho các ngôn ngữ khác.
Ví dụ bên dưới, :lang định xác định dấu nhắc cho phần tử với lang=”no”:
<html> <head> <style> q:lang(no) { quotes: "~" "~"; } </style> </head> <body> <p>Văn bản <q lang="no">Trích dẫn</q>Văn bản.</p> </body> </html>
Pseudo Classes trong CSS

Selector Ví dụ Mô tả ví dụ
:active a:active Chọn liên kết đang hoạt động
:checked input:checked Chọn mỗi phần tử đã kiểm tra
:disabled input:disabled Chọn mỗi phần tử bị vô hiệu
:empty p:empty Chọn mỗi phần tử
không có con
:enabled input:enabled Chọn mỗi phần tử được bật
:first-child p:first-child Chọn tất cả các phần tử
đó là con đầu tiên của cha mẹ nó
:first-of-type p:first-of-type Chọn mỗi phần tử
là phần tử
đầu tiên của cha / mẹ
:focus input:focus Chọn phần tử cần nhấn mạnh
:hover a:hover Chọn liên kết khi di chuyển chuột qua
:in-range input:in-range Chọn phần tử với một giá trị trong phạm vi được chỉ định
:invalid input:invalid Chọn tất cả các phần tử có giá trị không hợp lệ
:lang(language) p:lang(it) Chọn mỗi phần tử
với một giá trị thuộc tính lang bắt đầu với “it”
:last-child p:last-child Chọn mỗi phần tử
là con cuối cùng của cha mẹ
:last-of-type p:last-of-type Chọn mỗi phần tử
là phần tử
cuối cùng của cha mẹ
:link a:link Chọn tất cả các liên kết chưa được click
:not(selector) :not(p) Chọn mọi phần tử không phải là một phần tử

:nth-child(n) p:nth-child(2) Chọn mỗi phần tử
là con thứ hai của cha mẹ
:nth-last-child(n) p:nth-last-child(2) Chọn mỗi phần tử
là con thứ hai của cha / mẹ nó, kể từ con cuối cùng
:nth-last-of-type(n) p:nth-last-of-type(2) Chọn mỗi phần tử
là phần tử
thứ hai của cha / mẹ nó, tính từ con cuối cùng
:nth-of-type(n) p:nth-of-type(2) Chọn mỗi phần tử
là phần tử
thứ hai của cha / mẹ
:only-of-type p:only-of-type Chọn mỗi phần tử
là yếu tố
duy nhất của cha mẹ nó

:only-child p:only-child Chọn mỗi phần tử
là con duy nhất của cha / mẹ của nó
:optional input:optional Chọn các phần tử không có thuộc tính “required”
:out-of-range input:out-of-range Chọn các phần tử với một giá trị bên ngoài phạm vi được chỉ định
:read-only input:read-only Chọn các phần tử với thuộc tính “readonly” được chỉ định
:read-write input:read-write Chọn các phần tử mà không có thuộc tính “readonly”
:required input:required Chọn phần tử với thuộc tính “required” được chỉ định
:root root Chọn phần tử gốc của tài liệu
:target #news:target Chọn phần tử #news đang hoạt động hiện tại (nhấp vào URL có chứa tên anchor đó)
:valid input:valid Chọn tất cả các phần tử với giá trị hợp lệ
:visited a:visited Chọn tất cả liên kết đã truy cập

programming css Pseudo-class la gì pseudo-elements là gì Pseudo class after Pseudo Elements

Hướng dẫn css pseudo-class là gì

Pseudo-classes là gì?

Cú pháp

Anchor Pseudo-classes

Pseudo-classes và CSS Classes

Di chuyển chuột vào div

Di chuyển chuột đơn giản

CSS – The :first-child Pseudo-class

Phần tử đầu tiên phù hợp

Phần tử đầu tiên phù hợp với tất cả phần tử

Tất cả phần tử phù hợp với tất cả “con đầu tiên” phần tử

CSS – The :lang Pseudo-class

Pseudo Classes trong CSS

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội

Phần tử
đầu tiên phù hợp