CSS3 không có bộ chọn cha mẹ. Nếu CSS4 được phát hành thì có một bộ chọn CSS4 được đề xuất, $, sẽ giống như việc chọn phần tử li
- Tuy nhiên, hiện tại, mã này không thể được sử dụng trong bất kỳ trình duyệt nào
ul $li ul.sub { .. }
- Trong thời gian chờ đợi, chúng tôi sẽ phải sử dụng JavaScript nếu chúng tôi cần chọn phần tử gốc
$['ul li:has[ul.child]'].addClass['has_child'];
CSS là nền tảng của các trang web, được sử dụng để phát triển trang web bằng cách tạo kiểu trang web và ứng dụng web. Bạn có thể học CSS từ đầu bằng cách làm theo Hướng dẫn CSS và Ví dụ về CSS này
Mỗi tài liệu HTML thực sự có thể được gọi là cây tài liệu. Chúng tôi mô tả các yếu tố trong cây giống như chúng tôi sẽ mô tả một cây gia đình. Có tổ tiên, con cháu, cha mẹ, con cái, anh chị em
Điều quan trọng là phải hiểu cây tài liệu vì bộ chọn CSS sử dụng cây tài liệu
Sử dụng tài liệu HTML mẫu bên dưới cho các ví dụ này. Phần của tài liệu được bỏ qua cho ngắn gọn
________0
Sơ đồ của cây tài liệu HTML ở trên sẽ như thế này
tổ tiên
Tổ tiên đề cập đến bất kỳ phần tử nào được kết nối nhưng tiếp tục ở trên cây tài liệu - bất kể cao hơn bao nhiêu cấp
Trong sơ đồ bên dưới, phần tử là tổ tiên của tất cả các phần tử khác trên trang
hậu duệ
Hậu duệ đề cập đến bất kỳ phần tử nào được kết nối nhưng hạ thấp cây tài liệu - bất kể thấp hơn bao nhiêu cấpTrong sơ đồ bên dưới, tất cả các phần tử được kết nối bên dưới
phần tử là hậu duệ của phần tử đó
.
cha mẹ và con cái
Cha mẹ là một phần tử nằm ngay phía trên và được kết nối với một phần tử trong cây tài liệu. Trong sơ đồ dưới đây, các
là cha mẹ của
- .
Phần tử con là một phần tử nằm ngay bên dưới và được kết nối với một phần tử trong cây tài liệu. Trong sơ đồ trên, các
Ước mơ từ lâu của các nhà phát triển front-end là có cách áp dụng CSS cho một phần tử dựa trên những gì đang xảy ra bên trong phần tử đó
Có thể chúng tôi muốn áp dụng một bố cục cho thành phần bài viết nếu có hình ảnh chính ở trên cùng và một bố cục khác nếu không có hình ảnh chính. Hoặc có thể chúng tôi muốn áp dụng các kiểu khác nhau cho một biểu mẫu tùy thuộc vào trạng thái của một trong các trường đầu vào của nó. Làm thế nào về việc cung cấp cho thanh bên một màu nền nếu có một thành phần nhất định trong thanh bên đó và một màu nền khác nếu thành phần đó không có?
Trong hai mươi năm qua, Nhóm công tác CSS đã thảo luận về khả năng này rất nhiều lần. Nhu cầu rõ ràng và được hiểu rõ. Xác định cú pháp là một nhiệm vụ khả thi. Nhưng việc tìm ra cách một công cụ trình duyệt có thể xử lý các mẫu hình tròn có khả năng rất phức tạp và vượt qua các phép tính đủ nhanh dường như là điều không thể. Các phiên bản đầu tiên của bộ chọn gốc đã được soạn thảo cho CSS3, chỉ được hoãn lại. Cuối cùng, lớp giả
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 được định nghĩa chính thức trong. Nhưng chỉ riêng việc có một tiêu chuẩn web đã không biến figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 thành hiện thực. Chúng tôi vẫn cần một nhóm trình duyệt để tìm ra thách thức thực sự về hiệu suất. Trong khi đó, máy tính tiếp tục mạnh hơn và nhanh hơn qua từng nămVào năm 2021, Igalia bắt đầu ủng hộ
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 giữa các nhóm kỹ sư trình duyệt, tạo mẫu ý tưởng của họ và ghi lại những phát hiện của họ về hiệu suất. Sự chú ý mới trên figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 đã thu hút sự chú ý của các kỹ sư làm việc trên WebKit tại Apple. Chúng tôi bắt đầu triển khai lớp giả, suy nghĩ về các khả năng cải tiến hiệu suất cần thiết để thực hiện công việc này. Chúng tôi đã tranh luận xem có nên bắt đầu với một phiên bản nhanh hơn với phạm vi rất hạn chế và hẹp về những gì nó có thể làm, sau đó cố gắng loại bỏ những giới hạn đó nếu có thể… hay bắt đầu với thứ gì đó không có giới hạn và chỉ áp dụng các hạn chế theo yêu cầu. Chúng tôi đã thực hiện và triển khai phiên bản mạnh mẽ hơn. Chúng tôi đã phát triển một số tối ưu hóa bộ nhớ đệm và lọc cụ thể cho figure:has[pre] {
background: rgb[252, 232, 255];
border: 3px solid white;
padding: 1rem;
}
1 mới, đồng thời tận dụng các chiến lược tối ưu hóa nâng cao hiện có của công cụ CSS của chúng tôi. Và cách tiếp cận của chúng tôi đã có hiệu quả, chứng minh rằng sau hai thập kỷ chờ đợi, cuối cùng cũng có thể triển khai bộ chọn như vậy với hiệu suất tuyệt vời, ngay cả khi có các cây DOM lớn và số lượng lớn figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 bộ chọnNhóm WebKit đã xuất bản
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 trong Safari Technology Preview 137 vào tháng 12 năm 2021 và trong Safari 15. 4 vào ngày 14 tháng 3 năm 2022. Igalia đã thực hiện công việc kỹ thuật để triển khai figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 trong Chromium, sẽ xuất hiện trong Chrome 105 vào ngày 30 tháng 8 năm 2022. Có lẽ các trình duyệt khác được xây dựng trên Chromium sẽ không bị bỏ lại phía sau. Mozilla hiện đang nghiên cứu triển khai FirefoxVì vậy, chúng ta hãy thực hiện từng bước xem các nhà phát triển web có thể làm gì với công cụ này. Hóa ra, lớp giả
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 không chỉ là một “bộ chọn cha”. Sau nhiều thập kỷ bế tắc, bộ chọn này có thể làm được nhiều hơn thếCơ bản về cách sử dụng. has[] làm bộ chọn gốc
Hãy bắt đầu với những điều cơ bản. Hãy tưởng tượng chúng ta muốn tạo kiểu cho phần tử
figure:has[pre] {
background: rgb[252, 232, 255];
border: 3px solid white;
padding: 1rem;
}
6 dựa trên loại nội dung trong hình. Đôi khi hình bóng của chúng ta chỉ gói gọn trong một hình ảnh
Trong khi những lần khác có một hình ảnh với chú thích
Maggie loves being outside off-leash.
Bây giờ, hãy áp dụng một số kiểu cho
figure:has[pre] {
background: rgb[252, 232, 255];
border: 3px solid white;
padding: 1rem;
}
7 sẽ chỉ áp dụng nếu có một figure:has[pre] {
background: rgb[252, 232, 255];
border: 3px solid white;
padding: 1rem;
}
8 bên trong hìnhfigure:has[figcaption] {
background: white;
padding: 0.6rem;
}
Bộ chọn này có nghĩa là những gì nó nói — bất kỳ phần tử
figure:has[pre] {
background: rgb[252, 232, 255];
border: 3px solid white;
padding: 1rem;
}
7 nào có figure:has[pre] {
background: rgb[252, 232, 255];
border: 3px solid white;
padding: 1rem;
}
8 bên trong sẽ được chọnĐây là bản trình diễn, nếu bạn muốn thay đổi mã và xem điều gì sẽ xảy ra. Đảm bảo sử dụng trình duyệt hỗ trợ
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 — tính đến hôm nay, đó là SafariXem cây bút
has[] demo — Các biến thể hình của Jen Simmons [@jensimmons]
trên CodePen
Trong bản trình diễn này, tôi cũng nhắm mục tiêu bất kỳ
figure:has[pre] {
background: rgb[252, 232, 255];
border: 3px solid white;
padding: 1rem;
}
7 nào có chứa phần tử @supports selector[:has[img]] {
small {
display: none;
}
}
3 bằng cách sử dụng @supports selector[:has[img]] {
small {
display: none;
}
}
4figure:has[pre] {
background: rgb[252, 232, 255];
border: 3px solid white;
padding: 1rem;
}
Và tôi sử dụng Selector Feature Query để ẩn lời nhắc về hỗ trợ trình duyệt bất cứ khi nào trình duyệt hiện tại hỗ trợ
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7@supports selector[:has[img]] {
small {
display: none;
}
}
Bản thân quy tắc
@supports selector[:has[img]] {
small {
display: none;
}
}
6 đã được hỗ trợ rất tốt. Nó có thể cực kỳ hữu ích bất cứ lúc nào bạn muốn sử dụng truy vấn tính năng để kiểm tra sự hỗ trợ của trình duyệt đối với một bộ chọn cụ thểVà cuối cùng, trong bản demo đầu tiên này, tôi cũng viết một bộ chọn phức tạp bằng cách sử dụng
@supports selector[:has[img]] {
small {
display: none;
}
}
7. Tôi muốn áp dụng @supports selector[:has[img]] {
small {
display: none;
}
}
8 cho hình — nhưng chỉ khi hình ảnh là nội dung duy nhất. Flexbox làm cho hình ảnh kéo dài để lấp đầy tất cả không gian có sẵnTôi sử dụng bộ chọn để nhắm mục tiêu bất kỳ
figure:has[pre] {
background: rgb[252, 232, 255];
border: 3px solid white;
padding: 1rem;
}
7 nào không có bất kỳ thành phần nào không phải là hình ảnh. Nếu figure:has[pre] {
background: rgb[252, 232, 255];
border: 3px solid white;
padding: 1rem;
}
7 có figure:has[pre] {
background: rgb[252, 232, 255];
border: 3px solid white;
padding: 1rem;
}
8, @supports selector[:has[img]] {
small {
display: none;
}
}
3, figure:not[:has[:not[img]]] {
display: flex;
}
3 hoặc figure:not[:has[:not[img]]] {
display: flex;
}
4 — hoặc bất kỳ thành phần nào ngoài figure:not[:has[:not[img]]] {
display: flex;
}
5 — thì bộ chọn không áp dụngfigure:not[:has[:not[img]]] {
display: flex;
}
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 là một điều mạnh mẽMột ví dụ thực tế sử dụng. has[] với CSS Grid
Hãy xem bản trình diễn thứ hai mà tôi đã sử dụng
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 làm công cụ chọn chính để dễ dàng giải quyết một nhu cầu rất thiết thựcTôi có một số thẻ giới thiệu bài viết được trình bày bằng CSS Grid. Một số thẻ chỉ chứa tiêu đề và văn bản, trong khi những thẻ khác cũng có hình ảnh. Tôi muốn thẻ có hình ảnh chiếm nhiều không gian hơn trên lưới so với thẻ không có hình ảnh
Tôi không muốn phải làm thêm việc để hệ thống quản lý nội dung của mình áp dụng một lớp hoặc sử dụng JavaScript để bố trí. Tôi chỉ muốn viết một bộ chọn đơn giản bằng CSS sẽ yêu cầu trình duyệt tạo bất kỳ thẻ xem trước nào có hình ảnh để chiếm hai hàng và hai cột trong lưới
Lớp giả
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 làm cho điều này trở nên đơn giảnarticle:has[img] {
grid-column: span 2;
grid-row: span 2;
}
Xem cây bút
has[] demo — thẻ giới thiệu của Jen Simmons [@jensimmons]
trên CodePen
Hai bản trình diễn đầu tiên này sử dụng các bộ chọn phần tử đơn giản từ những ngày đầu của CSS, nhưng tất cả các bộ chọn có thể được kết hợp với
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7, bao gồm bộ chọn lớp, bộ chọn ID, bộ chọn thuộc tính — và các bộ tổ hợp mạnh mẽsử dụng. has[] với tổ hợp con
Đầu tiên, đánh giá nhanh về sự khác biệt giữa và [
article:has[img] {
grid-column: span 2;
grid-row: span 2;
}
0]Bộ kết hợp hậu duệ đã xuất hiện từ những ngày đầu của CSS. Đó là cái tên ưa thích khi chúng ta đặt khoảng cách giữa hai bộ chọn đơn giản. Như thế này
a img { .. }
Điều này nhắm mục tiêu tất cả các phần tử
figure:not[:has[:not[img]]] {
display: flex;
}
5 được chứa trong một phần tử article:has[img] {
grid-column: span 2;
grid-row: span 2;
}
2, bất kể khoảng cách giữa các phần tử article:has[img] {
grid-column: span 2;
grid-row: span 2;
}
2 và phần tử figure:not[:has[:not[img]]] {
display: flex;
}
5 trong cây HTML DOM
Bộ kết hợp con là tên khi chúng ta đặt một
article:has[img] {
grid-column: span 2;
grid-row: span 2;
}
0 giữa hai bộ chọn — lệnh này cho trình duyệt nhắm mục tiêu bất kỳ thứ gì khớp với bộ chọn thứ hai, nhưng chỉ khi bộ chọn thứ hai là con trực tiếp của bộ chọn thứ nhấta > img { .. }
Ví dụ: bộ chọn này nhắm mục tiêu tất cả các phần tử
figure:not[:has[:not[img]]] {
display: flex;
}
5 được bao bọc bởi phần tử article:has[img] {
grid-column: span 2;
grid-row: span 2;
}
2, nhưng chỉ khi phần tử figure:not[:has[:not[img]]] {
display: flex;
}
5 ở ngay sau phần tử article:has[img] {
grid-column: span 2;
grid-row: span 2;
}
2 trong HTML
Maggie loves being outside off-leash.
0Với ý nghĩ đó, chúng ta hãy xem xét sự khác biệt giữa hai ví dụ sau. Cả hai đều chọn phần tử
article:has[img] {
grid-column: span 2;
grid-row: span 2;
}
2, thay vì figure:not[:has[:not[img]]] {
display: flex;
}
5, vì chúng tôi đang sử dụng figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7
Maggie loves being outside off-leash.
1
Maggie loves being outside off-leash.
2Đầu tiên chọn bất kỳ phần tử
article:has[img] {
grid-column: span 2;
grid-row: span 2;
}
2 nào có figure:not[:has[:not[img]]] {
display: flex;
}
5 bên trong — bất kỳ vị trí nào trong cấu trúc HTML. Trong khi cái thứ hai chỉ chọn một phần tử nếu figure:not[:has[:not[img]]] {
display: flex;
}
5 là con trực tiếp của article:has[img] {
grid-column: span 2;
grid-row: span 2;
}
2Cả hai đều có thể hữu ích;
Xem cây bút
has[] — tổ hợp con cháu so với tổ hợp con của Jen Simmons [@jensimmons]
trên CodePen
Có hai loại tổ hợp bổ sung - cả hai đều là anh em ruột. Và chính nhờ những điều này mà
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 không chỉ là một bộ chọn gốcsử dụng. has[] với các tổ hợp anh chị em
Hãy xem xét hai bộ chọn có mối quan hệ anh chị em. Có [
a img { .. }
8] và [a img { .. }
9]Bộ kết hợp anh chị em tiếp theo [_______43_______8] chỉ chọn các đoạn văn đứng ngay sau phần tử
1
Maggie loves being outside off-leash.
3
Maggie loves being outside off-leash.
4Bộ kết hợp anh chị em tiếp theo [
a img { .. }
9] chọn tất cả các đoạn văn đứng sau phần tử
1. Chúng phải là anh em ruột, nhưng có thể có bất kỳ số lượng phần tử HTML nào khác ở giữa
Maggie loves being outside off-leash.
5
Maggie loves being outside off-leash.
6Lưu ý rằng cả
4 và
5 đều chọn các thành phần của đoạn văn chứ không phải tiêu đề của
1. Giống như các bộ chọn khác [nghĩ về
7], đó là phần tử cuối cùng được liệt kê được nhắm mục tiêu bởi bộ chọn. Nhưng nếu chúng ta muốn nhắm mục tiêu vào
1 thì sao? Bạn có thường xuyên muốn điều chỉnh lề trên tiêu đề dựa trên phần tử theo sau nó không? . Mã này cho phép chúng tôi chọn bất kỳ
1 nào có một figure:not[:has[:not[img]]] {
display: flex;
}
3 ngay sau nó
Maggie loves being outside off-leash.
7Kinh ngạc
Điều gì sẽ xảy ra nếu chúng tôi muốn làm điều này cho tất cả sáu thành phần tiêu đề mà không cần viết ra sáu bản sao của bộ chọn. Chúng tôi có thể sử dụng
a > img { .. }
2 để đơn giản hóa mã của chúng tôi
Maggie loves being outside off-leash.
8Hoặc nếu chúng ta muốn viết mã này cho nhiều phần tử hơn là chỉ các đoạn văn thì sao?
Maggie loves being outside off-leash.
9Kết hợp
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 với , [_______40_______0], [a img { .. }
8] và [a img { .. }
9] mở ra một thế giới đầy khả năng. Nhưng oh, đây vẫn chỉ là bắt đầuTrạng thái biểu mẫu tạo kiểu không có JS
Có rất nhiều lớp giả tuyệt vời có thể được sử dụng bên trong
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7. Trên thực tế, nó cách mạng hóa những gì các lớp giả có thể làm. Trước đây, các lớp giả chỉ được sử dụng để tạo kiểu cho một phần tử dựa trên trạng thái đặc biệt - hoặc tạo kiểu cho một trong các phần tử con của nó. Giờ đây, các lớp giả có thể được sử dụng để nắm bắt trạng thái mà không cần JavaScript và định kiểu bất kỳ thứ gì trong DOM dựa trên trạng thái đóCác trường nhập biểu mẫu cung cấp một cách mạnh mẽ để nắm bắt trạng thái như vậy. Các lớp giả dành riêng cho biểu mẫu bao gồm
a > img { .. }
8, a > img { .. }
9,
Maggie loves being outside off-leash.
00,
Maggie loves being outside off-leash.
01,
Maggie loves being outside off-leash.
02,
Maggie loves being outside off-leash.
03,
Maggie loves being outside off-leash.
04,
Maggie loves being outside off-leash.
05,
Maggie loves being outside off-leash.
06,
Maggie loves being outside off-leash.
07,
Maggie loves being outside off-leash.
08,
Maggie loves being outside off-leash.
09,
Maggie loves being outside off-leash.
10,
Maggie loves being outside off-leash.
11 và
Maggie loves being outside off-leash.
12Hãy giải quyết một trong những trường hợp sử dụng mà tôi đã mô tả trong phần giới thiệu — nhu cầu lâu dài về tạo kiểu cho nhãn biểu mẫu dựa trên trạng thái của trường nhập liệu. Hãy bắt đầu với một hình thức cơ bản
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
0Tôi muốn áp dụng nền cho toàn bộ biểu mẫu bất cứ khi nào một trong các trường được lấy nét
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
1Bây giờ tôi có thể sử dụng
Maggie loves being outside off-leash.
13 để thay thế, nhưng nó sẽ hoạt động như
Maggie loves being outside off-leash.
14. Lớp giả
Maggie loves being outside off-leash.
15 luôn áp dụng CSS bất cứ khi nào một trường được lấy nét. Lớp giả
Maggie loves being outside off-leash.
16 cung cấp một cách đáng tin cậy để tạo kiểu chỉ báo tiêu điểm chỉ khi trình duyệt vẽ một chỉ báo tiêu điểm, sử dụng cùng một phương pháp phỏng đoán phức tạp mà trình duyệt sử dụng để xác định có áp dụng vòng tiêu điểm hay khôngBây giờ, hãy tưởng tượng tôi muốn tạo kiểu cho các trường khác, những trường không được lấy nét — thay đổi màu văn bản nhãn của chúng và màu đường viền đầu vào. Trước
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7, JavaScript này yêu cầu. Bây giờ chúng ta có thể sử dụng CSS nàyfigure:has[figcaption] {
background: white;
padding: 0.6rem;
}
2Bộ chọn đó nói gì? . Và thay đổi đường viền của trường nhập liệu thành
Maggie loves being outside off-leash.
19Bạn có thể thấy mã này hoạt động trong bản demo sau bằng cách nhấp vào bên trong một trong các trường văn bản. Nền của biểu mẫu thay đổi, như tôi đã mô tả trước đó. Và màu viền của nhãn và đầu vào của các trường không nằm trong tiêu điểm cũng thay đổi
Xem cây bút
có [] bản trình diễn. Biểu mẫu của Jen Simmons [@jensimmons]
trên CodePen
Cũng trong bản demo này, tôi cũng muốn cải thiện cảnh báo cho người dùng khi có lỗi trong cách họ điền biểu mẫu. Trong nhiều năm, chúng tôi đã có thể dễ dàng đặt hộp màu đỏ xung quanh thông tin nhập không hợp lệ bằng CSS này
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
3Bây giờ với
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7, chúng ta cũng có thể chuyển văn bản nhãn thành màu đỏfigure:has[figcaption] {
background: white;
padding: 0.6rem;
}
4Bạn có thể xem kết quả bằng cách nhập nội dung nào đó vào trang web hoặc trường email không phải là URL hoặc địa chỉ email được tạo đầy đủ. Cả hai đều không hợp lệ và vì vậy cả hai sẽ kích hoạt đường viền màu đỏ và nhãn màu đỏ, với dấu “X”
Chế độ tối chuyển đổi không có JS
Và cuối cùng, trong cùng bản demo này, tôi đang sử dụng hộp kiểm để cho phép người dùng chuyển đổi giữa chủ đề sáng và tối
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
5Tôi đã tạo kiểu cho hộp kiểm chế độ tối bằng các kiểu tùy chỉnh, nhưng nó vẫn trông giống hộp kiểm. Với các kiểu phức tạp hơn, tôi có thể tạo nút bật tắt trong CSS
Theo cách tương tự, tôi có thể sử dụng menu chọn để cung cấp cho người dùng nhiều chủ đề cho trang web của mình
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
6Xem cây bút
has[] Demo #5 — Bộ chọn chủ đề thông qua Select by Jen Simmons [@jensimmons]
trên CodePen
Bất cứ khi nào có cơ hội sử dụng CSS thay vì JavaScript, tôi sẽ nắm lấy. Điều này dẫn đến trải nghiệm nhanh hơn và trang web mạnh mẽ hơn. JavaScript có thể làm những điều tuyệt vời và chúng ta nên sử dụng nó khi nó là công cụ phù hợp cho công việc. Nhưng nếu chúng ta có thể đạt được kết quả tương tự chỉ với HTML và CSS, điều đó thậm chí còn tốt hơn
Và nhiều hơn nữa
Nhìn qua các lớp giả khác, có rất nhiều lớp có thể được kết hợp với
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7. Tưởng tượng các khả năng với
Maggie loves being outside off-leash.
22,
Maggie loves being outside off-leash.
23,
Maggie loves being outside off-leash.
24,
Maggie loves being outside off-leash.
25,
Maggie loves being outside off-leash.
26,
Maggie loves being outside off-leash.
27,
Maggie loves being outside off-leash.
28,
Maggie loves being outside off-leash.
29,
Maggie loves being outside off-leash.
30,
Maggie loves being outside off-leash.
31. Lớp giả
Maggie loves being outside off-leash.
32 hoàn toàn mới được kích hoạt khi một
Maggie loves being outside off-leash.
33 ở trạng thái mở. Với
Maggie loves being outside off-leash.
34, bạn có thể định kiểu bất kỳ thứ gì trong DOM dựa trên việc
Maggie loves being outside off-leash.
33 đang mở hay đóngTuy nhiên, không phải mọi pseudo-class hiện được hỗ trợ bên trong
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 trong mọi trình duyệt, vì vậy hãy thử mã của bạn trong nhiều trình duyệt. Hiện tại, các lớp giả phương tiện động không hoạt động — như
Maggie loves being outside off-leash.
37,
Maggie loves being outside off-leash.
38,
Maggie loves being outside off-leash.
39, v.v. Chúng rất có thể hoạt động trong tương lai, vì vậy nếu bạn đang đọc nó trong tương lai, hãy kiểm tra chúng. Ngoài ra, hỗ trợ vô hiệu hóa biểu mẫu hiện đang bị thiếu trong một số trường hợp cụ thể, do đó, các thay đổi trạng thái động đối với các lớp giả đó có thể không cập nhật với figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7Safari 16 sẽ thêm hỗ trợ cho
Maggie loves being outside off-leash.
41 mở ra những khả năng thú vị để viết mã xem URL hiện tại để tìm một đoạn khớp với ID của một phần tử cụ thể. Ví dụ: nếu người dùng nhấp vào mục lục ở đầu tài liệu và nhảy xuống phần của trang phù hợp với liên kết đó, thì
Maggie loves being outside off-leash.
42 cung cấp một cách để tạo kiểu cho nội dung đó một cách độc đáo, dựa trên thực tế là người dùng đã nhấp vào . Và figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 mở ra những gì phong cách như vậy có thể làmMột điều cần lưu ý — Nhóm làm việc CSS đã quyết định không cho phép tất cả các phần tử giả hiện có bên trong
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7. Ví dụ:
Maggie loves being outside off-leash.
45 và
Maggie loves being outside off-leash.
46 sẽ không hoạt động. Tương tự với
Maggie loves being outside off-leash.
47 và
Maggie loves being outside off-leash.
48Các. có [] cuộc cách mạng
Cảm giác này giống như một cuộc cách mạng về cách chúng ta sẽ viết các bộ chọn CSS, mở ra một thế giới các khả năng trước đây là không thể hoặc thường không đáng để nỗ lực. Có vẻ như trong khi chúng ta có thể nhận ra ngay lập tức
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 sẽ hữu ích như thế nào, thì chúng ta cũng không biết điều gì thực sự có thể xảy ra. Trong vài năm tới, những người tạo bản trình diễn và tìm hiểu sâu về những gì CSS có thể làm sẽ nảy ra những ý tưởng tuyệt vời, kéo dài figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 đến giới hạn của nóMichelle Barker đã tạo một bản trình diễn tuyệt vời kích hoạt hoạt ảnh của các kích thước rãnh Lưới thông qua việc sử dụng
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 và trạng thái di chuột. Đọc thêm về nó trong bài đăng trên blog của cô ấy. Hỗ trợ cho các bản nhạc lưới hoạt hình sẽ xuất hiện trong Safari 16. Bạn có thể dùng thử bản demo này ngay hôm nay trong Safari Technology Preview hoặc Safari 16 betaPhần khó nhất của
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 sẽ là mở mang đầu óc của chúng ta về những khả năng của nó. Chúng tôi đã quá quen với các giới hạn áp đặt cho chúng tôi do không có bộ chọn gốc. Bây giờ, chúng ta phải phá vỡ những thói quen đóĐó là tất cả lý do để sử dụng vanilla CSS và không giới hạn bản thân trong các lớp được xác định trong một khung. Bằng cách viết CSS của riêng bạn, tùy chỉnh cho dự án của bạn, bạn hoàn toàn có thể tận dụng mọi khả năng mạnh mẽ của các trình duyệt ngày nay
Bạn sẽ sử dụng
figure:has[figcaption] {
background: white;
padding: 0.6rem;
}
7 để làm gì? . tôi nóng lòng muốn xem của bạn
Phần tử cha trong CSS là gì?
Chúng ta có thể chọn phần tử cha trong CSS không?
Làm cách nào để viết CSS cho lớp cha?
Làm cách nào để viết CSS từ con sang cha mẹ?
elements where the parent is a