CSS anh chị em của cha mẹ
|
Chúng tôi sử dụng bộ chọn anh chị em liền kề (+), nếu chúng tôi muốn khớp phần tử xuất hiện ngay sau bộ chọn đầu tiên. Ở đây, cả hai bộ chọn đều là con của cùng một phần tử cha Show
Cú pháp của bộ kết hợp anh chị em liền kề CSS như sau - Selector + Selector{
attribute: /*value*/
}Nếu chúng tôi muốn chọn anh chị em của cùng một cha mẹ bất kể vị trí của phần tử được chọn thứ hai, chúng tôi sử dụng bộ kết hợp anh chị em chung CSS Adrian Bece là nhà phát triển web toàn diện với kinh nghiệm sâu rộng về Thương mại điện tử. Anh ấy thích viết và nói về những công nghệ mới nhất và tốt nhất trên web … Thông tin thêm về Adrian ↬ Bản tin emailEmail (đập vỡ) của bạn
Mẹo hàng tuần về giao diện người dùng & UX.
Bộ chọn gốc đã nằm trong danh sách mong muốn của các nhà phát triển trong hơn 10 năm và nó đã trở thành một trong những tính năng CSS được yêu cầu nhiều nhất bên cạnh các truy vấn vùng chứa kể từ đó. Lý do chính khiến tính năng này không được triển khai trong thời gian này dường như là do những lo ngại về hiệu suất. Điều tương tự cũng được nói về các truy vấn bộ chứa và những truy vấn này hiện đang được thêm vào các phiên bản beta của trình duyệt, vì vậy những hiệu suất đó dường như không còn là vấn đề nữa Công cụ kết xuất trình duyệt đã được cải thiện khá nhiều kể từ đó. Quá trình kết xuất đã được tối ưu hóa đến mức các trình duyệt có thể xác định một cách hiệu quả những gì cần được kết xuất hoặc cập nhật và những gì không, mở đường cho một bộ tính năng mới và thú vị Brian Kardell gần đây đã thông báo rằng nhóm của anh ấy tại Igalia hiện đang tạo mẫu một bộ chọn Nhóm tại Igalia đã làm việc trên một số tính năng công cụ web đáng chú ý như truy vấn vùng chứa và lưới CSS, do đó, bộ chọn Điều gì làm cho bộ chọn quan hệ trở thành một trong những tính năng được yêu cầu nhiều nhất trong vài năm qua và các nhà phát triển đang khắc phục bộ chọn bị thiếu như thế nào? Các trường hợp sử dụng tiềm năngBộ chọn quan hệ sẽ hữu ích cho việc áp dụng kiểu có điều kiện cho các thành phần giao diện người dùng dựa trên nội dung hoặc trạng thái của phần tử con hoặc phần tử kế tiếp của nó trong cây DOM. Nguyên mẫu bộ chọn quan hệ sắp tới có thể mở rộng phạm vi và các trường hợp sử dụng cho các bộ chọn hiện có, cải thiện chất lượng và độ mạnh của CSS, đồng thời giảm nhu cầu sử dụng JavaScript để áp dụng các kiểu và lớp CSS cho các trường hợp sử dụng đó Hãy xem một vài ví dụ cụ thể để giúp chúng tôi minh họa nhiều trường hợp sử dụng tiềm năng Biến thể dựa trên nội dungMột số thành phần giao diện người dùng có thể có nhiều biến thể dựa trên các khía cạnh khác nhau — nội dung, vị trí trên trang, trạng thái con, v.v. Trong những trường hợp đó, chúng tôi thường tạo nhiều lớp CSS để bao gồm tất cả các biến thể có thể có và áp dụng chúng theo cách thủ công hoặc bằng JavaScript, tùy thuộc vào cách tiếp cận và ngăn xếp công nghệ Ngay cả khi sử dụng phương pháp đặt tên CSS như BEM, các nhà phát triển cần theo dõi các lớp CSS khác nhau và đảm bảo áp dụng chúng một cách chính xác cho phần tử cha và, tùy chọn, cho các phần tử con bị ảnh hưởng. Tùy thuộc vào số lượng các biến thể, các kiểu thành phần có thể nhanh chóng vượt khỏi tầm kiểm soát và trở nên khó quản lý cũng như duy trì dẫn đến lỗi, vì vậy các nhà phát triển sẽ cần ghi lại tất cả các biến thể và trường hợp sử dụng bằng cách sử dụng các công cụ như Storybook Với bộ chọn CSS quan hệ, các nhà phát triển có thể viết kiểm tra nội dung trực tiếp bằng CSS và các kiểu sẽ được áp dụng tự động. Điều này sẽ làm giảm số lượng các lớp CSS biến thể, giảm khả năng xảy ra lỗi do lỗi của con người và các bộ chọn sẽ tự ghi lại bằng các kiểm tra điều kiện Kiểu dựa trên xác thựcCSS hỗ trợ các lớp giả đầu vào như Tuy nhiên, việc nhắm mục tiêu các phần tử có Bộ chọn quan hệ sẽ mở rộng trường hợp sử dụng cho các lớp giả trạng thái đầu vào như Điều này không chỉ áp dụng cho các lớp giả đó. Khi làm việc với API bên ngoài trả về các thông báo lỗi được thêm vào vùng chứa đầu vào, sẽ không cần phải áp dụng lớp CSS thích hợp cho vùng chứa. Bằng cách viết một bộ chọn quan hệ với điều kiện kiểm tra xem bộ chứa thông báo con có trống không, các kiểu thích hợp có thể được áp dụng cho bộ chứa Thêm sau khi nhảy. Tiếp tục đọc bên dưới ↓ Gặp gỡ Hội thảo trực tuyến Smashing về giao diện người dùng & giao diện người dùng, với các bài học thực tế, phiên trực tiếp, bản ghi video và phần Hỏi & Đáp thân thiện. Trên các hệ thống thiết kế, UX, hiệu suất web và CSS/JS. Với Brad Frost, Stephanie Troeth và rất nhiều người khác  Phần tử conĐôi khi một phần tử cha hoặc các kiểu phần tử trước đó phụ thuộc vào trạng thái của phần tử đích. Trường hợp này khác với trạng thái xác thực vì trạng thái không liên quan chặt chẽ đến tính hợp lệ của đầu vào Giống như trong ví dụ trước, lớp giả Bộ chọn quan hệ sẽ mở rộng phạm vi và trường hợp sử dụng của bộ chọn CSS ngoài phần tử bị ảnh hưởng hoặc phần tử liền kề của nó Chọn anh chị em trước đâyBộ chọn CSS bị giới hạn bởi hướng lựa chọn — có thể chọn phần tử con hoặc phần tử theo sau, nhưng không thể chọn phần tử cha hoặc phần tử trước đó Bộ chọn quan hệ cũng có thể được sử dụng làm bộ chọn anh chị em trước đó Bộ chọn /* Select image element that is a child of a figure element if figure element has a figcaption as a child */ figure:has(figcaption) img { /* .. */ } /* Select a button element that is a child of a form element if a child checkbox input element is checked */ form:has(input[type="checkbox"]:checked) button { /* .. */ } 8 nâng caoKhi làm việc với các phần tử được tải động và sử dụng bộ tải khung, thông thường sẽ chuyển đổi một lớp CSS đang tải trên phần tử gốc bằng JavaScript sau khi dữ liệu được tìm nạp và các thành phần được điền dữ liệu Bộ chọn quan hệ có thể loại bỏ nhu cầu về chức năng chuyển đổi lớp JavaScript CSS bằng cách mở rộng phạm vi và chức năng của lớp giả Đặc tả lớp giả CSS |
