Bộ chọn HTML

Lợi ích của việc này là bạn có thể có cùng một phần tử HTML, nhưng trình bày nó khác nhau tùy thuộc vào lớp hoặc ID của nó

Trong CSS, bộ chọn lớp là một tên đứng trước dấu chấm (“. ”) và bộ chọn ID là tên đứng trước ký tự băm (“#”)

Vì vậy, CSS có thể trông giống như


#top {
    background-color: #ccc;
    padding: 20px
}

.intro {
    color: red;
    font-weight: bold;
}

Bộ chọn HTML
Liên kết với chúng tôi. Nếu bạn thấy HTML Dog hữu ích, vui lòng cân nhắc việc liên kết với chúng tôi.

HTML đề cập đến CSS bằng cách sử dụng các thuộc tính idclass. Nó có thể trông giống như thế này


id="top">

Chocolate curry

class="intro">This is my recipe for making curry purely with chocolate

class="intro">Mmm mm mmmmm

Sự khác biệt giữa một ID và một lớp là một ID có thể được sử dụng để xác định một phần tử, trong khi một lớp có thể được sử dụng để xác định nhiều hơn một phần tử.

Bạn cũng có thể áp dụng bộ chọn cho một phần tử HTML cụ thể bằng cách chỉ cần nêu rõ bộ chọn HTML trước, do đó, p.jam { /* whatever */ } sẽ chỉ được áp dụng cho các phần tử đoạn văn có lớp “jam”

Bộ chọn là một trong những phần quan trọng nhất của CSS. Họ định hình tầng và xác định cách áp dụng các kiểu cho các thành phần trên trang

Cho đến gần đây, trọng tâm của CSS chưa bao giờ thực sự chạm vào bộ chọn. Đôi khi sẽ có các bản cập nhật gia tăng trong đặc tả của bộ chọn, nhưng không bao giờ có bất kỳ cải tiến đột phá thực sự nào. May mắn thay, gần đây người ta đã chú ý nhiều hơn đến các bộ chọn, hãy xem cách chọn các loại phần tử và phần tử khác nhau trong các trạng thái sử dụng khác nhau

CSS3 đã mang đến các bộ chọn mới, mở ra một thế giới hoàn toàn mới về các cơ hội và cải tiến cho các phương pháp hiện có. Ở đây chúng ta sẽ thảo luận về bộ chọn, cũ và mới, và cách sử dụng chúng tốt nhất

Bộ chọn chung

Trước khi tìm hiểu quá sâu về một số bộ chọn phức tạp hơn và những bộ chọn được cung cấp trong CSS3, chúng ta hãy xem nhanh một số bộ chọn phổ biến hơn hiện nay. Các bộ chọn này bao gồm bộ chọn loại, lớp và ID

Bộ chọn loại xác định một phần tử dựa trên loại của nó, cụ thể là cách phần tử đó được khai báo trong HTML. Bộ chọn lớp xác định một phần tử dựa trên giá trị thuộc tính lớp của nó, giá trị này có thể được sử dụng lại trên nhiều phần tử khi cần thiết để giúp chia sẻ các kiểu phổ biến. Cuối cùng, bộ chọn ID xác định một thành phần dựa trên giá trị thuộc tính ID của nó, giá trị này là duy nhất và chỉ được sử dụng một lần trên mỗi trang

CSS
1
2
3
4
h1 {...}
.tagline {...}
#intro {...}
HTML
1
2
3
4
5
 id="intro">
  

...

class="tagline">...

Tổng quan về bộ chọn phổ biến

Ví dụPhân loạiGiải thích
h1 {...}
.tagline {...}
#intro {...}
30Bộ chọn loạiChọn một phần tử theo loại của nó_______3_______31Bộ chọn lớpChọn một phần tử theo giá trị thuộc tính lớp, có thể được sử dụng lại nhiều lần trên mỗi trang
h1 {...}
.tagline {...}
#intro {...}
32Bộ chọn IDChọn một phần tử theo giá trị thuộc tính ID, là duy nhất và chỉ được sử dụng một lần trên mỗi trang

Bộ chọn con

Bộ chọn con cung cấp một cách để chọn các phần tử nằm trong một phần tử khác, do đó biến chúng thành phần tử con của phần tử cha của chúng. Các lựa chọn này có thể được thực hiện theo hai cách khác nhau, sử dụng bộ chọn con cháu hoặc con trực tiếp

Bộ chọn hậu duệ

Bộ chọn con phổ biến nhất là bộ chọn con cháu, khớp với mọi phần tử theo sau tổ tiên đã xác định. Phần tử hậu duệ không nhất thiết phải xuất hiện ngay sau phần tử tổ tiên bên trong cây tài liệu, chẳng hạn như mối quan hệ cha-con, nhưng có thể nằm ở bất kỳ đâu trong phần tử tổ tiên. Bộ chọn hậu duệ được tạo bằng cách tách rời các phần tử trong bộ chọn, tạo ra một cấp độ phân cấp mới cho từng danh sách phần tử

Bộ chọn

h1 {...}
.tagline {...}
#intro {...}
33 là bộ chọn con cháu, chỉ chọn các phần tử
h1 {...}
.tagline {...}
#intro {...}
34 nằm bên trong phần tử
h1 {...}
.tagline {...}
#intro {...}
35. Lưu ý, bất kể phần tử
h1 {...}
.tagline {...}
#intro {...}
34 sống ở đâu, miễn là nó nằm trong phần tử
h1 {...}
.tagline {...}
#intro {...}
35, nó sẽ luôn được chọn. Ngoài ra, bất kỳ phần tử
h1 {...}
.tagline {...}
#intro {...}
34 nào bên ngoài phần tử
h1 {...}
.tagline {...}
#intro {...}
35 đều không được chọn

Dưới đây, các tiêu đề trên dòng 3 và 5 được chọn

CSS
1
2
article h2 {...}
HTML
1
2
3
4
5
6
7
8

...

This heading will be selected

This heading will be selected

Bộ chọn con trực tiếp

Đôi khi bộ chọn hậu duệ hơi quá nhiệt tình, chọn nhiều hơn mong đợi. Đôi khi chỉ cần chọn phần tử con trực tiếp của phần tử cha, không phải mọi trường hợp của phần tử được lồng sâu bên trong phần tử tổ tiên. Trong trường hợp này, bộ chọn con trực tiếp có thể được sử dụng bằng cách đặt dấu lớn hơn,

h1 {...}
.tagline {...}
#intro {...}
40, giữa phần tử cha và phần tử con trong bộ chọn

Ví dụ:

h1 {...}
.tagline {...}
#intro {...}
41 là bộ chọn con trực tiếp chỉ xác định các phần tử
h1 {...}
.tagline {...}
#intro {...}
42 nằm trực tiếp trong phần tử
h1 {...}
.tagline {...}
#intro {...}
35. Bất kỳ phần tử
h1 {...}
.tagline {...}
#intro {...}
42 nào được đặt bên ngoài phần tử
h1 {...}
.tagline {...}
#intro {...}
35 hoặc được lồng bên trong phần tử khác không phải phần tử
h1 {...}
.tagline {...}
#intro {...}
35, sẽ không được chọn

Dưới đây, đoạn trên dòng 3 là bài con trực tiếp duy nhất của bài viết gốc của nó, do đó được chọn

CSS
1
2
article > p {...}
HTML
1
2
3
4
5
6
7
8
h1 {...}
.tagline {...}
#intro {...}
1

Bộ chọn con Tổng quan

Ví dụPhân loạiGiải thích_______3_______33Bộ chọn con chọn một phần tử nằm ở bất kỳ đâu trong một phần tử tổ tiên đã xác định
h1 {...}
.tagline {...}
#intro {...}
41Bộ chọn con trực tiếpChọn một phần tử nằm ngay bên trong một phần tử cha đã xác định

Bộ chọn anh chị em

Biết cách chọn con của một phần tử phần lớn có lợi và khá phổ biến. Tuy nhiên, các phần tử anh chị em, những phần tử có chung cha mẹ, cũng có thể cần được chọn. Các lựa chọn anh chị em này có thể được thực hiện bằng cách sử dụng bộ chọn anh chị em chung và bộ chọn anh chị em liền kề

Bộ chọn anh chị em chung

Bộ chọn anh chị em chung cho phép các phần tử được chọn dựa trên các phần tử anh chị em của chúng, những phần tử có cùng cha mẹ chung. Chúng được tạo bằng cách sử dụng ký tự dấu ngã,

h1 {...}
.tagline {...}
#intro {...}
49, giữa hai phần tử trong bộ chọn. Phần tử đầu tiên xác định phần tử thứ hai sẽ là anh chị em với nhau và cả hai phần tử này phải có cùng cha mẹ

Bộ chọn

h1 {...}
.tagline {...}
#intro {...}
50 là bộ chọn anh chị em chung tìm kiếm các phần tử
h1 {...}
.tagline {...}
#intro {...}
42 theo sau và chia sẻ cùng một phần tử cha của bất kỳ phần tử
h1 {...}
.tagline {...}
#intro {...}
34 nào. Để một phần tử
h1 {...}
.tagline {...}
#intro {...}
42 được chọn, nó phải đứng sau bất kỳ phần tử
h1 {...}
.tagline {...}
#intro {...}
34 nào

Các đoạn văn trên dòng 5 và 9 được chọn khi chúng xuất hiện sau tiêu đề trong cây tài liệu và chia sẻ cùng cha mẹ với tiêu đề anh chị em của chúng

CSS
1
2
h1 {...}
.tagline {...}
#intro {...}
3 HTML
h1 {...}
.tagline {...}
#intro {...}
4
h1 {...}
.tagline {...}
#intro {...}
5

Bộ chọn anh chị em liền kề

Đôi khi có thể muốn kiểm soát nhiều hơn một chút, bao gồm khả năng chọn phần tử anh chị em trực tiếp theo sau phần tử anh chị em khác, đó là nơi phần tử anh chị em liền kề xuất hiện. Bộ chọn anh chị em liền kề sẽ chỉ chọn các phần tử anh chị em trực tiếp theo sau một phần tử anh chị em khác. Thay vì sử dụng ký tự dấu ngã, như với bộ chọn anh chị em nói chung, bộ chọn anh chị em liền kề sử dụng ký tự cộng,

h1 {...}
.tagline {...}
#intro {...}
55, giữa hai phần tử trong bộ chọn. Một lần nữa, phần tử đầu tiên xác định phần tử thứ hai sẽ trực tiếp theo sau và là anh chị em với nhau và cả hai phần tử này phải có cùng cha mẹ.

Nhìn vào bộ chọn anh chị em liền kề

h1 {...}
.tagline {...}
#intro {...}
56, chỉ các phần tử
h1 {...}
.tagline {...}
#intro {...}
42 ngay sau phần tử
h1 {...}
.tagline {...}
#intro {...}
34 sẽ được chọn. Cả hai đều phải chia sẻ cùng một phần tử cha

Đoạn trên dòng 5 được chọn vì nó trực tiếp theo sau tiêu đề anh chị em của nó cùng với việc chia sẻ cùng một phần tử cha, do đó được chọn

CSS
1
2
h1 {...}
.tagline {...}
#intro {...}
7 HTML
h1 {...}
.tagline {...}
#intro {...}
4
h1 {...}
.tagline {...}
#intro {...}
9

Ví dụ về bộ chọn anh chị em

HTML
h1 {...}
.tagline {...}
#intro {...}
4
1
2
3
4
5
1 CSS
1
2
3
4
5
2
1
2
3
4
5
3

Thử nghiệm

Xem Bộ chọn anh chị em bút của Shay Howe (@shayhowe) trên CodePen

Tổng quan về bộ chọn anh chị em

Ví dụPhân loạiGiải thích
h1 {...}
.tagline {...}
#intro {...}
50Bộ chọn anh chị em chung Chọn một phần tử theo sau bất kỳ vị trí nào sau phần tử trước đó, trong đó cả hai phần tử đều có chung cha_______3_______56Bộ chọn anh chị em liền kềChọn một phần tử theo ngay sau phần tử trước đó, trong đó cả hai phần tử đều có chung một cha

Bộ chọn thuộc tính

Một số bộ chọn phổ biến được xem xét sớm cũng có thể được định nghĩa là bộ chọn thuộc tính, trong đó một phần tử được chọn dựa trên lớp hoặc giá trị ID của nó. Các bộ chọn thuộc tính lớp và ID này được sử dụng rộng rãi và cực kỳ mạnh mẽ nhưng chỉ là bước khởi đầu. Các bộ chọn thuộc tính khác đã xuất hiện trong những năm qua, đặc biệt là có một bước tiến lớn với CSS3. Bây giờ các phần tử có thể được chọn dựa trên việc có thuộc tính hay không và giá trị của nó có thể chứa gì

Bộ chọn hiện tại thuộc tính

Bộ chọn thuộc tính đầu tiên xác định một phần tử dựa trên việc nó có bao gồm một thuộc tính hay không, bất kể giá trị thực nào. Để chọn một phần tử dựa trên việc có thuộc tính hay không, hãy bao gồm tên thuộc tính trong ngoặc vuông,

h1 {...}
.tagline {...}
#intro {...}
61, trong bộ chọn. Dấu ngoặc vuông có thể có hoặc không theo bất kỳ hạn định nào, chẳng hạn như loại phần tử hoặc lớp, tất cả tùy thuộc vào mức độ cụ thể mong muốn

CSS
1
2
1
2
3
4
5
5 HTML
1
2
1
2
3
4
5
7

Bộ chọn thuộc tính bằng

Để xác định một phần tử có giá trị thuộc tính khớp chính xác và cụ thể, có thể sử dụng cùng một bộ chọn từ trước đó, tuy nhiên, lần này bên trong dấu ngoặc vuông sau tên thuộc tính, hãy bao gồm giá trị khớp mong muốn. Bên trong dấu ngoặc vuông phải là tên thuộc tính theo sau là dấu bằng,

h1 {...}
.tagline {...}
#intro {...}
62, dấu ngoặc kép,
h1 {...}
.tagline {...}
#intro {...}
63 và bên trong dấu ngoặc kép phải là giá trị thuộc tính phù hợp mong muốn

CSS
1
2
1
2
3
4
5
9 HTML
1
2
 id="intro">
  

...

class="tagline">...
1

Thuộc tính chứa bộ chọn

Khi tìm kiếm một phần tử dựa trên một phần của giá trị thuộc tính, nhưng không khớp chính xác, ký tự dấu hoa thị,

h1 {...}
.tagline {...}
#intro {...}
64, có thể được sử dụng trong dấu ngoặc vuông của bộ chọn. Dấu hoa thị phải nằm ngay sau tên thuộc tính, ngay trước dấu bằng. Làm như vậy có nghĩa là giá trị cần tuân theo chỉ cần xuất hiện hoặc được chứa trong giá trị thuộc tính

CSS
1
2
 id="intro">
  

...

class="tagline">...
3 HTML
1
2
 id="intro">
  

...

class="tagline">...
5

Thuộc tính bắt đầu với bộ chọn

Ngoài việc chọn một thành phần dựa trên giá trị thuộc tính có chứa giá trị đã nêu hay không, bạn cũng có thể chọn một thành phần dựa trên giá trị thuộc tính bắt đầu bằng giá trị nào. Sử dụng dấu ngoặc tròn,

h1 {...}
.tagline {...}
#intro {...}
65, trong dấu ngoặc vuông của bộ chọn giữa tên thuộc tính và dấu bằng biểu thị rằng giá trị thuộc tính phải bắt đầu bằng giá trị đã nêu

CSS
1
2
 id="intro">
  

...

class="tagline">...
7 HTML
1
2
 id="intro">
  

...

class="tagline">...
9

Thuộc tính kết thúc với bộ chọn

Đối diện với bộ chọn bắt đầu bằng, cũng có bộ chọn thuộc tính kết thúc bằng. Thay vì sử dụng dấu mũ, bộ chọn thuộc tính kết thúc bằng sử dụng ký hiệu đô la,

h1 {...}
.tagline {...}
#intro {...}
66, trong dấu ngoặc vuông của bộ chọn giữa tên thuộc tính và dấu bằng. Sử dụng ký hiệu đô la biểu thị rằng giá trị thuộc tính cần kết thúc bằng giá trị đã nêu

CSS
1
2
1
2
1 HTML
1
2
1
2
3

Bộ chọn khoảng cách thuộc tính

Đôi khi các giá trị thuộc tính có thể được đặt cách xa nhau, trong đó chỉ cần khớp một trong các từ để thực hiện lựa chọn. Trong trường hợp này, việc sử dụng ký tự dấu ngã,

h1 {...}
.tagline {...}
#intro {...}
49, trong dấu ngoặc vuông của bộ chọn giữa tên thuộc tính và dấu bằng biểu thị một giá trị thuộc tính phải được phân tách bằng khoảng trắng, với một từ khớp với giá trị đã nêu chính xác

CSS
1
2
1
2
5 HTML
1
2
1
2
7

Bộ chọn có gạch nối thuộc tính

Khi một giá trị thuộc tính được phân tách bằng dấu gạch nối, thay vì được phân tách bằng khoảng trắng, ký tự dòng dọc,

h1 {...}
.tagline {...}
#intro {...}
68, có thể được sử dụng trong dấu ngoặc vuông của bộ chọn giữa tên thuộc tính và dấu bằng. Đường thẳng đứng biểu thị rằng giá trị thuộc tính có thể được phân tách bằng dấu gạch nối tuy nhiên các từ được phân tách bằng dấu gạch ngang phải bắt đầu bằng giá trị đã nêu

CSS
1
2
1
2
9 HTML
1
2
article h2 {...}
1

Ví dụ về bộ chọn thuộc tính

HTML
1
2
3
4
5
6
7
8
article h2 {...}
3 CSS
article h2 {...}
4
article h2 {...}
5

Thử nghiệm

Xem Bộ chọn thuộc tính bút của Shay Howe (@shayhowe) trên CodePen

Tổng quan về bộ chọn thuộc tính

Ví dụPhân loạiGiải thích_______3_______69Bộ chọn hiện tại thuộc tínhChọn một phần tử nếu thuộc tính đã cho có mặt
h1 {...}
.tagline {...}
#intro {...}
70Bộ chọn thuộc tính bằng nhauChọn một phần tử nếu giá trị thuộc tính đã cho khớp chính xác với giá trị đã nêu
h1 {...}
.tagline {...}
#intro {...}
71Bộ chọn chứa một thuộc tínhChọn một phần tử nếu giá trị thuộc tính đã cho chứa ít nhất một lần thể hiện của giá trị đã nêu
h1 {...}
.tagline {...}
#intro {...}
72Thuộc tính bắt đầu bằng bộ chọnChọn một phần tử nếu

lớp giả

Các lớp giả tương tự như các lớp thông thường trong HTML tuy nhiên chúng không được nêu trực tiếp trong phần đánh dấu, thay vào đó chúng được điền động do hành động của người dùng hoặc cấu trúc tài liệu. Lớp giả phổ biến nhất và bạn có thể đã thấy trước đây là

h1 {...}
.tagline {...}
#intro {...}
76. Lưu ý cách lớp giả này bắt đầu bằng ký tự dấu hai chấm,
h1 {...}
.tagline {...}
#intro {...}
77, cũng như tất cả các lớp giả khác

Liên kết các lớp giả

Một số lớp giả cơ bản hơn bao gồm hai liên kết xoay quanh cụ thể. Các lớp giả

h1 {...}
.tagline {...}
#intro {...}
78 và
h1 {...}
.tagline {...}
#intro {...}
79 xác định xem một liên kết đã được truy cập hay chưa. Để tạo kiểu cho một mỏ neo chưa được truy cập, lớp giả
h1 {...}
.tagline {...}
#intro {...}
78 phát huy tác dụng, trong đó các kiểu liên kết kiểu lớp giả
h1 {...}
.tagline {...}
#intro {...}
79 mà người dùng đã truy cập dựa trên lịch sử duyệt web của họ

article h2 {...}
6_______17_______7

Lớp giả hành động người dùng

Dựa trên hành động của người dùng, các lớp giả khác nhau có thể được áp dụng động cho một phần tử, trong đó bao gồm các lớp giả

h1 {...}
.tagline {...}
#intro {...}
76,
h1 {...}
.tagline {...}
#intro {...}
83 và
h1 {...}
.tagline {...}
#intro {...}
84. Lớp giả
h1 {...}
.tagline {...}
#intro {...}
76 được áp dụng cho một phần tử khi người dùng di chuyển con trỏ của họ qua phần tử, thường được sử dụng nhất với các phần tử neo. Lớp giả
h1 {...}
.tagline {...}
#intro {...}
83 được áp dụng cho một phần tử khi người dùng tương tác với một phần tử, chẳng hạn như nhấp vào một phần tử. Cuối cùng, lớp giả
h1 {...}
.tagline {...}
#intro {...}
84 được áp dụng cho một phần tử khi người dùng đặt một phần tử làm tiêu điểm của trang, thường bằng cách sử dụng bàn phím để chuyển từ phần tử này sang phần tử khác

1
2
3
4
article h2 {...}
9

Trạng thái giao diện người dùng Các lớp giả

Như với các lớp giả liên kết, cũng có một số lớp giả được tạo xung quanh trạng thái giao diện người dùng của các phần tử, đặc biệt là trong các phần tử biểu mẫu. Các lớp giả trạng thái phần tử giao diện người dùng này bao gồm

h1 {...}
.tagline {...}
#intro {...}
88,
h1 {...}
.tagline {...}
#intro {...}
89,
h1 {...}
.tagline {...}
#intro {...}
90 và
h1 {...}
.tagline {...}
#intro {...}
91

Lớp giả

h1 {...}
.tagline {...}
#intro {...}
88 chọn một đầu vào ở trạng thái mặc định là đã bật và có sẵn để sử dụng, trong đó lớp giả
h1 {...}
.tagline {...}
#intro {...}
89 chọn một đầu vào có thuộc tính
h1 {...}
.tagline {...}
#intro {...}
94 gắn với nó. Nhiều trình duyệt theo mặc định sẽ làm mờ các đầu vào bị vô hiệu hóa để thông báo cho người dùng rằng đầu vào không có sẵn để tương tác, tuy nhiên những kiểu đó có thể được điều chỉnh theo ý muốn với lớp giả
h1 {...}
.tagline {...}
#intro {...}
89

article h2 {...}
6_______18_______1

Hai lớp giả trạng thái phần tử giao diện người dùng cuối cùng của

h1 {...}
.tagline {...}
#intro {...}
90 và
h1 {...}
.tagline {...}
#intro {...}
91 xoay quanh các phần tử đầu vào hộp kiểm và nút radio. Lớp giả
h1 {...}
.tagline {...}
#intro {...}
90 chọn hộp kiểm hoặc nút radio, như bạn có thể mong đợi, được kiểm tra. Khi một hộp kiểm hoặc nút radio không được chọn hoặc không được chọn, nó sẽ tồn tại ở trạng thái không xác định, từ đó lớp giả
h1 {...}
.tagline {...}
#intro {...}
91 có thể được sử dụng để nhắm mục tiêu các phần tử này

article h2 {...}
6_______18_______3

Các lớp giả cấu trúc & vị trí

Một số lớp giả dựa trên cấu trúc và vị trí, trong đó chúng được xác định dựa trên vị trí của các phần tử trong cây tài liệu. Các lớp giả dựa trên cấu trúc và vị trí này có một vài hình dạng và kích cỡ khác nhau, mỗi lớp cung cấp chức năng độc đáo của riêng chúng. Một số lớp giả đã tồn tại lâu hơn những lớp khác, tuy nhiên CSS3 đã mang đến một bộ lớp giả hoàn toàn mới để bổ sung cho những lớp hiện có

con đầu lòng,. con cuối cùng, &. con một

Các lớp giả dựa trên cấu trúc và vị trí đầu tiên mà người ta có thể bắt gặp là các lớp giả

1
2
3
4
5
00,
1
2
3
4
5
01 và
1
2
3
4
5
02. Lớp giả
1
2
3
4
5
00 sẽ chọn một phần tử nếu đó là phần tử con đầu tiên trong lớp cha của nó, trong khi lớp giả
1
2
3
4
5
01 sẽ chọn một phần tử nếu đó là phần tử cuối cùng trong lớp cha của nó. Các lớp giả này là hoàn hảo để chọn các mục đầu tiên hoặc cuối cùng trong danh sách, v.v. Ngoài ra,
1
2
3
4
5
02 sẽ chọn một phần tử nếu đó là phần tử duy nhất trong phần tử cha. Ngoài ra, lớp giả
1
2
3
4
5
02 có thể được viết là
1
2
3
4
5
07, tuy nhiên
1
2
3
4
5
02 có tính đặc hiệu thấp hơn

Ở đây bộ chọn

1
2
3
4
5
09 xác định mục danh sách đầu tiên trong danh sách, trong khi bộ chọn
1
2
3
4
5
10 xác định mục danh sách cuối cùng trong danh sách, do đó dòng 2 và 10 được chọn. Bộ chọn
1
2
3
4
5
11 đang tìm kiếm một bộ phận là con duy nhất của phần tử cha, không có bất kỳ phần tử anh chị em nào khác. Trong trường hợp này, dòng 4 được chọn vì nó là phần duy nhất trong mục danh sách cụ thể

CSS
1
2
3
4
1
2
3
4
5
6
7
8
5 HTML
1
2
3
4
5
6
7
8
6
1
2
3
4
5
6
7
8
7

loại đầu tiên,. cuối cùng của loại, &. duy nhất của loại

Việc tìm kiếm con đầu lòng, con cuối cùng và con duy nhất của cha hoặc mẹ khá hữu ích và thường là tất cả những gì cần thiết. Tuy nhiên, đôi khi bạn chỉ muốn chọn phần tử con đầu tiên, cuối cùng hoặc duy nhất của một loại phần tử cụ thể. Ví dụ: nếu bạn chỉ muốn chọn đoạn đầu tiên hoặc đoạn cuối cùng trong một bài viết hoặc có lẽ là hình ảnh duy nhất trong một bài viết. May mắn thay, đây là nơi các bộ chọn giả

1
2
3
4
5
12,
1
2
3
4
5
13 và
1
2
3
4
5
14 xuất hiện

Lớp giả

1
2
3
4
5
12 sẽ chọn phần tử đầu tiên thuộc loại của nó trong phần cha, trong khi lớp giả
1
2
3
4
5
13 sẽ chọn phần tử cuối cùng thuộc loại của nó trong phần cha. Lớp giả
1
2
3
4
5
14 sẽ chọn một phần tử nếu nó là phần tử duy nhất thuộc loại của nó trong phần tử cha

Trong ví dụ dưới đây, lớp giả

1
2
3
4
5
18 và
1
2
3
4
5
19 lần lượt chọn đoạn đầu tiên và đoạn cuối cùng trong bài viết, bất kể chúng thực sự là con đầu tiên hay con cuối cùng trong bài viết. Dòng 3 và 6 được chọn, phản ánh các bộ chọn này. Bộ chọn
1
2
3
4
5
20 xác định hình ảnh trên dòng 5 vì nó là hình ảnh duy nhất xuất hiện trong bài báo, do đó cũng được chọn

CSS
1
2
3
4
1
2
3
4
5
6
7
8
9 HTML

...

This heading will be selected

This heading will be selected

0

...

This heading will be selected

This heading will be selected

1

Cuối cùng, có một vài lớp giả dựa trên cấu trúc và vị trí chọn các phần tử dựa trên một số hoặc một biểu thức đại số. Các lớp giả này bao gồm

1
2
3
4
5
21,
1
2
3
4
5
22,
1
2
3
4
5
23 và
1
2
3
4
5
24. Tất cả các lớp giả duy nhất này đều có tiền tố là
1
2
3
4
5
25 và chấp nhận một số hoặc biểu thức bên trong dấu ngoặc đơn, được biểu thị bằng ký tự đối số
1
2
3
4
5
26

Số hoặc biểu thức nằm trong dấu ngoặc đơn xác định chính xác phần tử hoặc phần tử nào sẽ được chọn. Sử dụng một số hoàn toàn sẽ đếm các phần tử riêng lẻ từ đầu hoặc cuối của cây tài liệu và sau đó chọn một phần tử, trong khi sử dụng một biểu thức sẽ đếm nhiều phần tử từ đầu hoặc cuối của cây tài liệu và chọn chúng theo nhóm hoặc bội số

Sử dụng số và biểu thức lớp giả

Như đã đề cập, việc sử dụng các số hoàn toàn trong lớp giả sẽ được tính từ đầu hoặc cuối của cây tài liệu và chọn một phần tử tương ứng. Ví dụ: bộ chọn

1
2
3
4
5
27 sẽ chọn mục danh sách thứ tư trong danh sách. Việc đếm bắt đầu với mục danh sách đầu tiên và tăng thêm một cho mỗi mục danh sách, cho đến khi cuối cùng định vị và chọn mục thứ tư. Khi sử dụng một số hoàn toàn, nó phải là một số dương

Các biểu thức cho các lớp giả có định dạng

1
2
3
4
5
28,
1
2
3
4
5
29,
1
2
3
4
5
30,
1
2
3
4
5
31,
1
2
3
4
5
32 và
1
2
3
4
5
33. Biểu thức tương tự có thể được dịch và đọc là
1
2
3
4
5
34. Biến
1
2
3
4
5
35 là viết tắt của hệ số nhân trong đó các phần tử sẽ được đếm trong khi biến
1
2
3
4
5
36 là viết tắt của nơi bắt đầu hoặc diễn ra quá trình đếm

Ví dụ: bộ chọn

1
2
3
4
5
37 sẽ xác định mọi mục danh sách thứ ba trong danh sách. Sử dụng biểu thức này tương đương với
1
2
3
4
5
38,
1
2
3
4
5
39,
1
2
3
4
5
40, v.v. Như bạn có thể thấy kết quả của biểu thức này dẫn đến phần tử thứ ba, thứ sáu và mọi phần tử bội số của ba được chọn

Ngoài ra, các giá trị từ khóa

1
2
3
4
5
41 và
1
2
3
4
5
42 có thể được sử dụng. Như mong đợi, chúng sẽ chọn các phần tử lẻ hoặc chẵn tương ứng. Nếu các giá trị từ khóa không hấp dẫn, biểu thức của
1
2
3
4
5
43 sẽ chọn tất cả các phần tử lẻ trong khi biểu thức của
1
2
3
4
5
44 sẽ chọn tất cả các phần tử chẵn

Sử dụng bộ chọn

1
2
3
4
5
45 sẽ xác định mọi mục danh sách thứ tư bắt đầu với mục danh sách thứ bảy. Một lần nữa, sử dụng biểu thức này tương đương với
1
2
3
4
5
46,
1
2
3
4
5
47,
1
2
3
4
5
48, v.v. Kết quả của biểu thức này dẫn đến phần tử thứ bảy, thứ mười một, thứ mười lăm và mọi phần tử là bội số của bốn ở đây được chọn

Sử dụng đối số

1
2
3
4
5
26 mà không có tiền tố là một số dẫn đến biến
1
2
3
4
5
35 được hiểu là
1
2
3
4
5
51. Với bộ chọn
1
2
3
4
5
52, mọi mục danh sách sẽ được chọn bắt đầu với mục danh sách thứ năm, không chọn bốn mục danh sách đầu tiên. Trong biểu thức, điều này được chia thành
1
2
3
4
5
53,
1
2
3
4
5
54,
1
2
3
4
5
55, v.v.

Để làm cho mọi thứ phức tạp hơn một chút, số âm cũng có thể được sử dụng. Ví dụ: bộ chọn

1
2
3
4
5
56 sẽ bắt đầu đếm mọi mục danh sách thứ sáu bắt đầu từ âm bốn, chọn các mục danh sách thứ hai, thứ tám và thứ mười bốn, v.v. Bộ chọn tương tự,
1
2
3
4
5
56, cũng có thể được viết là
1
2
3
4
5
58, mà không cần sử dụng biến
1
2
3
4
5
36 âm

Một biến

1
2
3
4
5
35 phủ định, hoặc một đối số
1
2
3
4
5
26 phủ định, phải được theo sau bởi một biến
1
2
3
4
5
36 dương. Khi đứng trước một biến
1
2
3
4
5
35 phủ định hoặc đối số
1
2
3
4
5
26 phủ định, biến
1
2
3
4
5
36 xác định mức độ đếm sẽ đạt đến mức nào. Ví dụ: bộ chọn
1
2
3
4
5
66 sẽ chọn mọi mục danh sách thứ ba trong mười hai mục danh sách đầu tiên. Bộ chọn
1
2
3
4
5
67 sẽ chọn chín mục danh sách đầu tiên trong một danh sách, vì đối số
1
2
3
4
5
26, không có bất kỳ biến
1
2
3
4
5
35 nào được nêu, được mặc định là
1
2
3
4
5
70

con thứ n(n) &. nth-con-cuối(n)

Với sự hiểu biết chung về cách hoạt động của các số và biểu thức của lớp giả, chúng ta hãy xem các lớp giả thực tế trong đó các số và biểu thức này có thể được sử dụng, đầu tiên là lớp giả

1
2
3
4
5
21 và
1
2
3
4
5
22. Các lớp giả này hoạt động hơi giống với các lớp giả
1
2
3
4
5
00 và
1
2
3
4
5
01 ở chỗ chúng xem xét và đếm tất cả các phần tử bên trong cha mẹ và chỉ chọn phần tử được xác định cụ thể.
1
2
3
4
5
21 hoạt động từ đầu cây tài liệu trong khi
1
2
3
4
5
22 hoạt động từ cuối cây tài liệu

Sử dụng pseudo-class

1
2
3
4
5
21, hãy nhìn vào bộ chọn
1
2
3
4
5
37. Bộ chọn ở đây sẽ xác định mọi mục danh sách thứ ba, do đó dòng 4 và 7 được chọn

CSS
1
2

...

This heading will be selected

This heading will be selected

3 HTML

...

This heading will be selected

This heading will be selected

0

...

This heading will be selected

This heading will be selected

5

Sử dụng một biểu thức khác trong lớp giả

1
2
3
4
5
21 sẽ mang lại một lựa chọn khác. Ví dụ, bộ chọn
1
2
3
4
5
80 sẽ xác định mọi mục danh sách thứ hai bắt đầu từ mục thứ ba và sau đó trở đi. Kết quả là các mục danh sách dòng 4 và 6 được chọn

CSS
1
2

...

This heading will be selected

This heading will be selected

7 HTML

...

This heading will be selected

This heading will be selected

0

...

This heading will be selected

This heading will be selected

9

Thay đổi biểu thức một lần nữa, lần này với giá trị âm, mang lại lựa chọn mới. Ở đây, bộ chọn

1
2
3
4
5
81 đang xác định bốn mục hàng đầu trong danh sách, không chọn phần còn lại của danh sách, do đó các dòng từ 2 đến 5 được chọn

CSS
1
2
1
2
1 HTML

...

This heading will be selected

This heading will be selected

0
1
2
3

Việc thêm một số nguyên âm trước đối số

1
2
3
4
5
26 sẽ thay đổi lại lựa chọn. Ở đây bộ chọn
1
2
3
4
5
83 xác định mọi mục danh sách thứ hai trong năm mục danh sách đầu tiên bắt đầu với mục danh sách đầu tiên, do đó các mục danh sách trên dòng 2, 4 và 6 được chọn

CSS
1
2
1
2
5 HTML

...

This heading will be selected

This heading will be selected

0
1
2
7

Thay đổi từ lớp giả

1
2
3
4
5
21 thành lớp giả
1
2
3
4
5
22 sẽ chuyển hướng đếm, với việc đếm bắt đầu từ cuối cây tài liệu bằng cách sử dụng lớp giả
1
2
3
4
5
22. Ví dụ: bộ chọn
1
2
3
4
5
87 sẽ xác định mọi mục danh sách thứ ba bắt đầu từ mục thứ hai đến mục cuối cùng trong danh sách, di chuyển về phía đầu danh sách. Ở đây các mục danh sách trên dòng 3 và 6 được chọn

CSS
1
2
1
2
9 HTML

...

This heading will be selected

This heading will be selected

0
article > p {...}
1

loại thứ n(n) &. nth-last-of-type(n)

Các lớp giả

1
2
3
4
5
23 và
1
2
3
4
5
24 rất giống với lớp giả
1
2
3
4
5
21 và
1
2
3
4
5
22, tuy nhiên thay vì đếm mọi phần tử bên trong lớp cha, các lớp giả
1
2
3
4
5
23 và
1
2
3
4
5
24 chỉ đếm các phần tử thuộc loại riêng của chúng. Ví dụ: khi đếm các đoạn trong một bài báo, lớp giả
1
2
3
4
5
23 và
1
2
3
4
5
24 sẽ bỏ qua bất kỳ tiêu đề, phần chia hoặc thành phần linh tinh nào không phải là đoạn văn, trong khi lớp
1
2
3
4
5
21 và
1
2
3
4
5
22 sẽ đếm mọi thành phần, bất kể loại của nó, chỉ chọn . Ngoài ra, tất cả các khả năng diễn đạt tương tự được sử dụng trong lớp giả
1
2
3
4
5
21 và
1
2
3
4
5
22 cũng có sẵn trong lớp giả
1
2
3
4
5
23 và
1
2
3
4
5
24

Sử dụng lớp giả

1
2
3
4
5
23 trong bộ chọn
 id="intro">
  

...

class="tagline">...
03, chúng tôi có thể xác định mọi đoạn thứ ba trong cha mẹ, bất kể các phần tử anh chị em khác trong cha mẹ. Ở đây các đoạn văn trên dòng 5 và 9 được chọn

CSS
1
2
article > p {...}
3 HTML
h1 {...}
.tagline {...}
#intro {...}
4
article > p {...}
5

Như với các lớp giả

1
2
3
4
5
21 và
1
2
3
4
5
22, sự khác biệt chính giữa các lớp giả
1
2
3
4
5
23 và
1
2
3
4
5
24 là lớp giả
1
2
3
4
5
23 đếm các phần tử từ phần đầu của cây tài liệu và lớp giả
1
2
3
4
5
24 đếm các phần tử từ phần cuối của cây tài liệu.

Sử dụng lớp giả

1
2
3
4
5
24, chúng ta có thể viết bộ chọn
 id="intro">
  

...

class="tagline">...
11 xác định mọi đoạn thứ hai từ phần cuối của phần tử cha bắt đầu bằng đoạn cuối. Ở đây các đoạn trên dòng 4, 7 và 9 được chọn

CSS
1
2
article > p {...}
7 HTML
h1 {...}
.tagline {...}
#intro {...}
4
article > p {...}
9

Mục tiêu lớp giả

Lớp giả

 id="intro">
  

...

class="tagline">...
12 được sử dụng để tạo kiểu cho các phần tử khi giá trị thuộc tính ID của phần tử khớp với giá trị của mã định danh phân đoạn URI. Mã định danh phân đoạn trong URI có thể được nhận dạng bằng ký tự băm,
 id="intro">
  

...

class="tagline">...
13 và những gì trực tiếp theo sau nó. URL
 id="intro">
  

...

class="tagline">...
14 bao gồm mã định danh đoạn của
 id="intro">
  

...

class="tagline">...
15. Khi mã định danh này khớp với giá trị thuộc tính ID của một phần tử trên trang, chẳng hạn như
 id="intro">
  

...

class="tagline">...
16, phần tử đó có thể được xác định và cách điệu bằng cách sử dụng lớp giả
 id="intro">
  

...

class="tagline">...
12. Định danh đoạn thường thấy nhất khi sử dụng hoặc liên kết đến một phần khác của cùng một trang

Nhìn vào đoạn mã bên dưới, nếu người dùng truy cập một trang có mã định danh phân đoạn URI là

 id="intro">
  

...

class="tagline">...
18, thì phần có cùng giá trị thuộc tính ID đó sẽ được cách điệu tương ứng bằng cách sử dụng lớp giả
 id="intro">
  

...

class="tagline">...
12. Nếu mã định danh đoạn URI thay đổi và khớp với giá trị thuộc tính ID của phần khác, thì phần mới đó có thể được cách điệu bằng cách sử dụng cùng một bộ chọn và lớp giả từ trước đó

CSS
1
2
h1 {...}
.tagline {...}
#intro {...}
01 HTML
1
2
h1 {...}
.tagline {...}
#intro {...}
03

Lớp giả trống

Lớp giả

 id="intro">
  

...

class="tagline">...
20 cho phép các phần tử không chứa nút con hoặc nút văn bản được chọn. Nhận xét, hướng dẫn xử lý và nút văn bản trống không được coi là con và không được coi là như vậy

Sử dụng lớp giả

 id="intro">
  

...

class="tagline">...
21 sẽ xác định các phân chia mà không có bất kỳ nút con hoặc nút văn bản nào. Bên dưới các vạch chia ở dòng 2 và 3 được chọn vì chúng hoàn toàn trống. Mặc dù phép chia thứ hai chứa một nhận xét, nhưng nó không được coi là con, do đó để trống phép chia. Bộ phận đầu tiên chứa văn bản, bộ phận thứ tư chứa một khoảng trống văn bản và bộ phận cuối cùng chứa một phần tử con
 id="intro">
  

...

class="tagline">...
22, do đó tất cả chúng đều bị loại trừ và không được chọn

CSS
1
2
h1 {...}
.tagline {...}
#intro {...}
05 HTML
h1 {...}
.tagline {...}
#intro {...}
06
h1 {...}
.tagline {...}
#intro {...}
07

Lớp giả phủ định

Lớp giả phủ định,

 id="intro">
  

...

class="tagline">...
23, là một lớp giả nhận một đối số được lọc ra khỏi lựa chọn được thực hiện. Bộ chọn
 id="intro">
  

...

class="tagline">...
24 sử dụng lớp giả phủ định để xác định mọi thành phần đoạn văn không có lớp
 id="intro">
  

...

class="tagline">...
25. Phần tử đoạn văn được xác định ở đầu bộ chọn, theo sau là lớp giả
 id="intro">
  

...

class="tagline">...
23. Bên trong dấu ngoặc đơn là bộ chọn phủ định, lớp
 id="intro">
  

...

class="tagline">...
27 trong trường hợp này

Bên dưới, cả bộ chọn

 id="intro">
  

...

class="tagline">...
28 và
 id="intro">
  

...

class="tagline">...
29 đều sử dụng lớp giả
 id="intro">
  

...

class="tagline">...
23. Bộ chọn
 id="intro">
  

...

class="tagline">...
28 xác định bất kỳ bộ phận nào không có lớp của
 id="intro">
  

...

class="tagline">...
32, trong khi bộ chọn
 id="intro">
  

...

class="tagline">...
29 xác định bất kỳ phần tử nào không phải là bộ phận. Kết quả là, phần chia ở dòng 1 được chọn, cũng như hai phần ở dòng 3 và 4, do đó chúng được đánh dấu đậm. Phần tử duy nhất không được chọn là phép chia có lớp
 id="intro">
  

...

class="tagline">...
32, vì nó nằm ngoài hai lớp giả phủ định

CSS
article h2 {...}
6
h1 {...}
.tagline {...}
#intro {...}
09 HTML
1
2
3
4
5
h1 {...}
.tagline {...}
#intro {...}
11

Ví dụ về lớp giả

HTML
h1 {...}
.tagline {...}
#intro {...}
12
h1 {...}
.tagline {...}
#intro {...}
13 CSS
h1 {...}
.tagline {...}
#intro {...}
14
h1 {...}
.tagline {...}
#intro {...}
15

Thử nghiệm

Xem ví dụ về Pen Pseudo-classes của Shay Howe (@shayhowe) trên CodePen

Tổng quan về các lớp giả

Ví dụPhân loạiGiải thích
 id="intro">
  

...

class="tagline">...
35Liên kết lớp giảChọn một liên kết chưa được người dùng truy cập
 id="intro">
  

...

class="tagline">...
36Liên kết lớp giảChọn một liên kết đã được người dùng truy cập
 id="intro">
  

...

class="tagline">...
37Hành động Lớp giả Chọn một phần tử khi người dùng đã di chuột qua nó
 id="intro">
  

...

class="tagline">...
38Action Lớp giả Chọn một phần tử khi người dùng đã tương tác

phần tử giả

Các phần tử giả là các phần tử động không tồn tại trong cây tài liệu và khi được sử dụng trong bộ chọn, các phần tử giả này cho phép các phần duy nhất của trang được cách điệu. Một điểm quan trọng cần lưu ý, chỉ có thể sử dụng một phần tử giả trong bộ chọn tại một thời điểm nhất định

Yếu tố giả văn bản

Các phần tử giả đầu tiên từng được phát hành là các phần tử giả văn bản

 id="intro">
  

...

class="tagline">...
57 và
 id="intro">
  

...

class="tagline">...
58. Phần tử giả
 id="intro">
  

...

class="tagline">...
57 sẽ xác định chữ cái đầu tiên của văn bản trong một phần tử, trong khi phần tử giả
 id="intro">
  

...

class="tagline">...
58 sẽ xác định dòng đầu tiên của văn bản trong một phần tử

Trong phần minh họa bên dưới, chữ cái đầu tiên của đoạn văn có phân loại

 id="intro">
  

...

class="tagline">...
61 được đặt ở cỡ chữ lớn hơn và được tô màu cam, cũng như dòng đầu tiên của đoạn văn có phân loại
 id="intro">
  

...

class="tagline">...
62. Các lựa chọn này được thực hiện bằng cách sử dụng các phần tử giả văn bản
 id="intro">
  

...

class="tagline">...
57 và
 id="intro">
  

...

class="tagline">...
58 tương ứng

CSS
h1 {...}
.tagline {...}
#intro {...}
06
h1 {...}
.tagline {...}
#intro {...}
17 HTML
article h2 {...}
6
h1 {...}
.tagline {...}
#intro {...}
19

Phần tử giả văn bản Demo

Xem phần tử giả văn bản Pen của Shay Howe (@shayhowe) trên CodePen

Phần tử giả nội dung được tạo

Các phần tử giả nội dung được tạo

 id="intro">
  

...

class="tagline">...
65 và
 id="intro">
  

...

class="tagline">...
66 tạo các phần tử giả cấp độ nội tuyến mới ngay bên trong phần tử được chọn. Hầu hết các phần tử giả này thường được sử dụng cùng với thuộc tính
 id="intro">
  

...

class="tagline">...
67 để thêm thông tin không quan trọng vào một trang, tuy nhiên không phải lúc nào cũng vậy. Việc sử dụng bổ sung các phần tử giả này có thể là thêm các thành phần giao diện người dùng vào trang mà không cần phải làm lộn xộn tài liệu với các phần tử phi ngữ nghĩa

Phần tử giả

 id="intro">
  

...

class="tagline">...
65 tạo phần tử giả trước hoặc phía trước phần tử được chọn, trong khi phần tử giả
 id="intro">
  

...

class="tagline">...
66 tạo phần tử giả sau hoặc phía sau phần tử được chọn. Các phần tử giả này xuất hiện lồng trong phần tử đã chọn, không nằm ngoài phần tử đó. Bên dưới phần tử giả
 id="intro">
  

...

class="tagline">...
66 được sử dụng để hiển thị giá trị thuộc tính
 id="intro">
  

...

class="tagline">...
71 của các liên kết neo trong ngoặc đơn sau các liên kết thực tế. Thông tin ở đây hữu ích nhưng không cần thiết nếu trình duyệt không hỗ trợ các phần tử giả này

CSS
h1 {...}
.tagline {...}
#intro {...}
06
h1 {...}
.tagline {...}
#intro {...}
21 HTML
article h2 {...}
6
h1 {...}
.tagline {...}
#intro {...}
23

Trình diễn phần tử giả nội dung đã tạo

Xem Phần tử giả nội dung do bút tạo bởi Shay Howe (@shayhowe) trên CodePen

Phần tử giả mảnh

Phần tử giả phân đoạn

 id="intro">
  

...

class="tagline">...
72 xác định một phần của tài liệu đã được chọn hoặc đánh dấu bởi hành động của người dùng. Sau đó, vùng lựa chọn có thể được cách điệu, tuy nhiên chỉ sử dụng các thuộc tính
 id="intro">
  

...

class="tagline">...
73,
 id="intro">
  

...

class="tagline">...
74,
 id="intro">
  

...

class="tagline">...
75 và
 id="intro">
  

...

class="tagline">...
76. Đáng chú ý, tài sản
 id="intro">
  

...

class="tagline">...
77 bị bỏ qua. Mặc dù thuộc tính tốc ký
 id="intro">
  

...

class="tagline">...
74 có thể được sử dụng để thêm màu, nhưng mọi hình ảnh sẽ bị bỏ qua

Dấu hai chấm đơn (. ) so với Dấu hai chấm (. )

Phần tử giả phân đoạn đã được thêm bằng CSS3 và trong nỗ lực phân biệt các lớp giả với các phần tử giả, hai dấu hai chấm đã được thêm vào các phần tử giả. May mắn thay, hầu hết các trình duyệt sẽ hỗ trợ cả hai giá trị, dấu hai chấm đơn hoặc kép, cho phần tử giả, tuy nhiên phần tử giả

 id="intro">
  

...

class="tagline">...
72 phải luôn bắt đầu bằng dấu hai chấm

Khi chọn bất kỳ văn bản nào trong bản trình diễn bên dưới, nền sẽ xuất hiện màu cam và mọi bóng văn bản sẽ bị xóa nhờ phần tử giả phân đoạn

 id="intro">
  

...

class="tagline">...
72. Cũng lưu ý, phần tử giả đoạn có tiền tố
 id="intro">
  

...

class="tagline">...
81 Mozilla đã được thêm vào để đảm bảo hỗ trợ tốt nhất cho tất cả các trình duyệt

h1 {...}
.tagline {...}
#intro {...}
24
h1 {...}
.tagline {...}
#intro {...}
25

Đoạn giới thiệu phần tử giả

Xem Phần tử giả mảnh bút của Shay Howe (@shayhowe) trên CodePen

Ví dụ về phần tử giả

HTML
1
2
h1 {...}
.tagline {...}
#intro {...}
27 CSS
h1 {...}
.tagline {...}
#intro {...}
28
h1 {...}
.tagline {...}
#intro {...}
29

Thử nghiệm

Xem phần tử giả Pen của Shay Howe (@shayhowe) trên CodePen

Tổng quan về phần tử giả

Ví dụPhân loạiGiải thích
 id="intro">
  

...

class="tagline">...
82Phần tử giả văn bảnChọn chữ cái đầu tiên của văn bản trong phần tử
 id="intro">
  

...

class="tagline">...
83Phần tử giả văn bảnChọn dòng văn bản đầu tiên trong phần tử
 id="intro">
  

...

class="tagline">...
84Nội dung được tạoTạo phần tử giả bên trong phần tử được chọn ở phần đầu
 id="intro">
  

...

class="tagline">...
85Nội dung được tạoTạo phần tử giả bên trong phần tử được chọn ở cuối
 id="intro">
  

...

class="tagline">...
72Phần tử giả được chọnSelects

Bộ chọn Hỗ trợ trình duyệt

Mặc dù các bộ chọn này cung cấp nhiều cơ hội và khả năng thực hiện một số điều thực sự tuyệt vời với CSS, nhưng đôi khi chúng gặp khó khăn do hỗ trợ trình duyệt kém. Trước khi làm bất cứ điều gì quá quan trọng, hãy kiểm tra các bộ chọn mà bạn muốn sử dụng trên các trình duyệt phổ biến nhất của khách truy cập, sau đó đưa ra phán quyết xem chúng có phù hợp hay không

CSS3. info cung cấp công cụ Kiểm tra bộ chọn CSS3 sẽ cho bạn biết bộ chọn nào được trình duyệt đang sử dụng hỗ trợ. Kiểm tra hỗ trợ trình duyệt trực tiếp từ nhà cung cấp cũng không bao giờ là một ý tưởng tồi

Ngoài ra, Selectivizr, một tiện ích JavaScript, cung cấp hỗ trợ tuyệt vời cho các bộ chọn này trong Internet Explorer 6-8. Hỗ trợ thêm, nếu cần, cũng có thể được cung cấp bởi bộ chọn jQuery

Bộ chọn Tốc độ & Hiệu suất

Điều quan trọng là phải chú ý đến tốc độ và hiệu suất của bộ chọn, vì sử dụng quá nhiều bộ chọn phức tạp có thể làm chậm quá trình hiển thị trang. Hãy chú ý và khi một bộ chọn bắt đầu trông hơi xa lạ, hãy nghĩ đến việc xem lại nó và xem liệu có thể tìm ra giải pháp tốt hơn không

Bộ chọn HTML là gì?

Bộ chọn HTML là phần văn bản của thẻ HTML . Ví dụ: H3 là bộ chọn cho thẻ

5 loại bộ chọn là gì?

Có nhiều loại bộ chọn cơ bản khác nhau. .
Bộ chọn phần tử
bộ chọn id
Bộ chọn lớp
Bộ chọn chung
Bộ chọn nhóm
Bộ chọn thuộc tính
Bộ chọn lớp giả
Bộ chọn phần tử giả

Ví dụ Selector là gì?

Bộ chọn là một chuỗi gồm một hoặc nhiều bộ chọn đơn giản được phân tách bằng các bộ kết hợp . Bộ kết hợp là. khoảng trắng, ">" và "+". Khoảng trắng có thể xuất hiện giữa bộ kết hợp và bộ chọn đơn giản xung quanh nó. Các phần tử của cây tài liệu khớp với bộ chọn được gọi là chủ thể của bộ chọn.

Bộ chọn được sử dụng để làm gì?

Bộ chọn được sử dụng để xác định duy nhất từng thành phần trong cây thành phần và nó cũng xác định cách thành phần hiện tại được thể hiện trong DOM HTML. When we create a new component using Angular CLI, the newly created component looks like this.