Hướng dẫn pseudo-class trong css - lớp giả trong css

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 để:
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 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”:


<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

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 `/* đườ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 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 `/* đườ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; }` 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 `/* đườ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; }` 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 `/* đườ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 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, `/ đườ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”:
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”

programming css CSS pseudo-class Selector trong CSS Pseudo class after Pseudo-class la gì Pseudo elements after pseudo-elements là gì Host trong CSS

Hướng dẫn pseudo-class trong css - lớp giả 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

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