Các lớp giả CSS
Lớp giả là gì?
Một lớp giả được sử dụng để xác định trạng thái đặc biệt của một phần tử.
Ví dụ: nó có thể được sử dụng để:
- Tạo kiểu cho một phần tử khi người dùng di chuột qua nó
- Tạo kiểu khác nhau cho các liên kết đã truy cập và chưa truy cập
- Tạo kiểu cho một phần tử khi nó được lấy nét
Di chuột qua tôi
Cú pháp
Cú pháp của các lớp giả:
selector:pseudo-class {
property: value;
}Các lớp giả neo
Liên kết có thể được hiển thị theo nhiều cách khác nhau:
Ví dụ
/* unvisited link */
a:link {
color: #FF0000;
}
/* visited
link */
a:visited {
color: #00FF00;
}
/* mouse over link */
a:hover {
color: #FF00FF;
}
/* selected link */
a:active {
color: #0000FF;
}
Hãy tự mình thử » Lưu ý: a:hover PHẢI xuất hiện sau a:link và a:visited trong định nghĩa CSS để có hiệu quả! a:active PHẢI xuất hiện sau a:hover trong định nghĩa CSS để có hiệu quả! Tên lớp giả không phân biệt chữ hoa chữ thường.
Lớp giả và lớp HTML
Các lớp giả có thể được kết hợp với các lớp HTML:
Khi bạn di chuột qua liên kết trong ví dụ, nó sẽ đổi màu:
Di chuột vào <div>
Một ví dụ về việc sử dụng lớp giả :hover trên phần tử <div>:
Di chuột qua chú giải công cụ đơn giản
Di chuột qua phần tử <div> để hiển thị phần tử <p> (như chú giải công cụ):
Tada! Tôi đây!
Ví dụ
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
} Hãy tự mình thử »CSS - Lớp giả :first-child
Lớp giả :first-child khớp với một phần tử được chỉ định là phần tử con đầu tiên của phần tử khác.
Khớp phần tử <p> đầu tiên
Trong ví dụ sau, bộ chọn khớp với bất kỳ phần tử <p> nào là phần tử con đầu tiên của bất kỳ phần tử nào:
Khớp phần tử <i> đầu tiên trong tất cả các phần tử <p>
Trong ví dụ sau, bộ chọn khớp với phần tử <i> đầu tiên trong tất cả các phần tử <p>:
Khớp tất cả các phần tử <i> trong tất cả các phần tử con <p> đầu tiên
Trong ví dụ sau, bộ chọn khớp với tất cả các phần tử <i> trong phần tử <p> là phần tử con đầu tiên của phần tử khác:
CSS - Lớp giả :lang
Lớp giả :lang cho phép bạn xác định các quy tắc đặc biệt cho các ngôn ngữ khác nhau.
Trong ví dụ bên dưới, :lang xác định dấu ngoặc kép cho phần tử <q> với lang="no":
Ví dụ
<html>
<head>
<style>
q:lang(no) {
quotes: "~" "~";
}
</style>
</head>
<body>
<p>Some text <q lang="no">A quote in a paragraph</q>
Some text.</p>
</body>
</html>
Hãy tự mình thử »Thêm ví dụ
Thêm các kiểu khác nhau vào siêu liên kết
Ví dụ này minh họa cách thêm các kiểu khác vào siêu liên kết.
Sử dụng :tập trung
Ví dụ này minh họa cách sử dụng lớp giả :focus.
Tất cả các lớp giả CSS
| Selector | Example | Example description |
|---|---|---|
| :active | a:active | Selects the active link |
| :checked | input:checked | Selects every checked <input> element |
| :disabled | input:disabled | Selects every disabled <input> element |
| :empty | p:empty | Selects every <p> element that has no children |
| :enabled | input:enabled | Selects every enabled <input> element |
| :first-child | p:first-child | Selects every <p> elements that is the first child of its parent |
| :first-of-type | p:first-of-type | Selects every <p> element that is the first <p> element of its parent |
| :focus | input:focus | Selects the <input> element that has focus |
| :hover | a:hover | Selects links on mouse over |
| :in-range | input:in-range | Selects <input> elements with a value within a specified range |
| :invalid | input:invalid | Selects all <input> elements with an invalid value |
| :lang( language ) | p:lang(it) | Selects every <p> element with a lang attribute value starting with "it" |
| :last-child | p:last-child | Selects every <p> elements that is the last child of its parent |
| :last-of-type | p:last-of-type | Selects every <p> element that is the last <p> element of its parent |
| :link | a:link | Selects all unvisited links |
| :not(selector) | :not(p) | Selects every element that is not a <p> element |
| :nth-child(n) | p:nth-child(2) | Selects every <p> element that is the second child of its parent |
| :nth-last-child(n) | p:nth-last-child(2) | Selects every <p> element that is the second child of its parent, counting from the last child |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Selects every <p> element that is the second <p> element of its parent, counting from the last child |
| :nth-of-type(n) | p:nth-of-type(2) | Selects every <p> element that is the second <p> element of its parent |
| :only-of-type | p:only-of-type | Selects every <p> element that is the only <p> element of its parent |
| :only-child | p:only-child | Selects every <p> element that is the only child of its parent |
| :optional | input:optional | Selects <input> elements with no "required" attribute |
| :out-of-range | input:out-of-range | Selects <input> elements with a value outside a specified range |
| :read-only | input:read-only | Selects <input> elements with a "readonly" attribute specified |
| :read-write | input:read-write | Selects <input> elements with no "readonly" attribute |
| :required | input:required | Selects <input> elements with a "required" attribute specified |
| :root | root | Selects the document's root element |
| :target | #news:target | Selects the current active #news element (clicked on a URL containing that anchor name) |
| :valid | input:valid | Selects all <input> elements with a valid value |
| :visited | a:visited | Selects all visited links |
Tất cả các phần tử giả CSS
| Selector | Example | Example description |
|---|---|---|
| ::after | p::after | Insert content after every <p> element |
| ::before | p::before | Insert content before every <p> element |
| ::first-letter | p::first-letter | Selects the first letter of every <p> element |
| ::first-line | p::first-line | Selects the first line of every <p> element |
| ::marker | ::marker | Selects the markers of list items |
| ::selection | p::selection | Selects the portion of an element that is selected by a user |
