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;
}
HTML đề cập đến CSS bằng cách sử dụng các thuộc tính id
và class
. Nó có thể trông giống như thế này
Chocolate curry
This is my recipe for making curry purely with chocolate
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
CSS1
2
3
4
h1 {...}
.tagline {...}
#intro {...}
HTML1
2
3
4
5
...
...
Tổng quan về bộ chọn phổ biến
Ví dụPhân loạiGiải thíchh1 {...} .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
CSS1
2
article h2 {...}
HTML1
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ọnVí 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ọnDướ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
CSS1
2
article > p {...}
HTML1
2
3
4
5
6
7
8
h1 {...}
.tagline {...}
#intro {...}
1Bộ 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 địnhh1 {...}
.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 địnhBộ 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àoCá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
CSS1
2
h1 {...}
.tagline {...}
#intro {...}
3 HTMLh1 {...}
.tagline {...}
#intro {...}
4h1 {...}
.tagline {...}
#intro {...}
5Bộ 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
CSS1
2
h1 {...}
.tagline {...}
#intro {...}
7 HTMLh1 {...}
.tagline {...}
#intro {...}
4h1 {...}
.tagline {...}
#intro {...}
9Ví dụ về bộ chọn anh chị em
HTMLh1 {...}
.tagline {...}
#intro {...}
41
2
3
4
5
1 CSS1
2
3
4
5
21
2
3
4
5
3Thử 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íchh1 {...}
.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 chaBộ 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ốnCSS1
2
1
2
3
4
5
5 HTML1
2
1
2
3
4
5
7Bộ 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ốnCSS1
2
1
2
3
4
5
9 HTML1
2
...
...
1Thuộ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ínhCSS1
2
...
...
3 HTML1
2
...
...
5Thuộ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êuCSS1
2
...
...
7 HTML1
2
...
...
9Thuộ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êuCSS1
2
1
2
1 HTML1
2
1
2
3Bộ 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ácCSS1
2
1
2
5 HTML1
2
1
2
7Bộ 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êuCSS1
2
1
2
9 HTML1
2
article h2 {...}
1Ví dụ về bộ chọn thuộc tính
HTML1
2
3
4
5
6
7
8
article h2 {...}
3 CSSarticle h2 {...}
4article h2 {...}
5Thử 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ặth1 {...}
.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êuh1 {...}
.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êuh1 {...}
.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ácLiê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_______7Lớ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ác1
2
3
4
article h2 {...}
9Trạ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 {...}
91Lớ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 {...}
89article h2 {...}
6_______18_______1Hai 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àyarticle h2 {...}
6_______18_______3Cá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ểCSS1
2
3
4
1
2
3
4
5
6
7
8
5 HTML1
2
3
4
5
6
7
8
61
2
3
4
5
6
7
8
7loạ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ệnLớ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ử chaTrong 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
CSS1
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
1Cuố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
26Số 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ươngCá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 đếmVí 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ọnNgoà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ẵnSử 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ọnSử 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 âmMộ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
70con 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ệuSử 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ọnCSS1
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
5Sử 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ọnCSS1
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
9Thay đổ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ọnCSS1
2
1
2
1 HTML