Nội dung
- 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 để:
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
Anchor Pseudo-classes
selector:pseudo-class {
property: value;
}
Anchor Pseudo-classes
Pseudo-classes và CSS Classes
/* đườ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;
}
Di chuyển chuột vào div a:hover
phải xuất hiện sau
/* đườ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;
}
0 và
/* đườ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;
}
1 trong định nghĩa của CSS để tạo ra hiệu ứng.
/* đườ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;
}
2 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
Di chuyển chuột vào div
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
Di chuyển chuột đơn giản
div:hover {
background-color: blue;
}
Di chuyển chuột đơn giản
CSS – The :first-child Pseudo-class
p {
display: none;
background-color: yellow;
padding: 20px;
}
div:hover p {
display: block;
}
CSS – The :first-child Pseudo-class
Phần tử đầu tiên phù hợp
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ử
p:first-child {
color: blue;
}
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ử
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ử
CSS – The :lang Pseudo-class
p:first-child i {
color: blue;
}
CSS – The :lang Pseudo-class
Pseudo Classes trong CSS
Ví dụ bên dưới,
/* đườ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;
}
6 định xác định dấu nhắc cho phần tử với lang=”no”:
q:lang[no] {
quotes: "~" "~";
}
Văn bản Trích dẫnVăn bản.
Pseudo Classes trong CSS
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ủa pseudo-classes là: | Đường dẫn có thể được hiển thị nhiều cách khác nhau: |
Lưu ý: a:hover phải xuất hiện sau 0 và 1 trong định nghĩa của CSS để tạo ra hiệu ứng. 2 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 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: | Một ví dụ sử dụng pseudo-class 4 trong phần tử : |
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ì đó] | Pseudo-class 5 kết nối một phần tử đặc biệt là “con đầu tiên” của phần tử khác. | 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ử: |
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ử : | 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: | Pseudo-class 6 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, 6 định xác định dấu nhắc cho phần tử với lang=”no”: |
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” |