Làm thế nào để bạn chọn cha mẹ đầu tiên trong css?
|
Tôi không nhớ chính xác thời điểm nữa. Nhưng tôi nhớ rằng một ngày nọ, tôi vừa hoài nghi vừa thất vọng khi nhận ra rằng không có cách nào để chọn phần tử gốc của một phần tử trong CSS Show Đợi đã, cái gì? . Tại sao? Rõ ràng, tôi không đơn độc. Ai đã từng học CSS chắc cũng từng rơi vào hoàn cảnh tương tự và tự đặt cho mình câu hỏi tương tự. Tại sao chúng ta không có bộ chọn cha trong CSS? . dưới dạng một luồng, hết phần tử này đến phần tử khác khi chúng xuất hiện. Khi một phần tử được hiển thị cho chế độ xem, phần tử gốc của nó đã ở đó, bao gồm tất cả kiểu dáng đẹp mắt của nó. Vẽ lại cha mẹ - và do đó, tất cả các cha mẹ khác - sau đó thực tế sẽ yêu cầu một đánh giá khác của tất cả các bộ chọn cha mẹ. Điều này, Remy Sharp đã đồng ý trước đó, một lần nữa sẽ rất tốn kém trên công cụ kết xuất nên việc triển khai bộ chọn gốc là vô nghĩa Vì vậy, tất cả chúng tôi đều chấp nhận điều không thể tránh khỏi và cố gắng hết sức để giải quyết nó. Chúng tôi đã thêm các lớp trợ giúp vào các mẫu của mình thông qua logic phía sau hoặc bằng JavaScript ở giao diện người dùng. Và nó phần nào làm việc. Nhưng trong hầu hết mọi dự án, vẫn có một thời điểm mà bộ chọn gốc sẽ là giải pháp nhanh nhất và “trung thực nhất về mặt vật chất” đã đếnTất cả điều này đã thay đổi vào tháng trước khi Apple phát hành Safari 15. 4, với tư cách là trình duyệt đầu tiên, hỗ trợ lớp giả nó đây rồi. Bộ chọn cha. Nhưng Lớp giả Hãy thử bản demo CodePen – và đảm bảo xem nó trong Safari 15. 4. ;) Hoặc, nếu bạn muốn tạo phong cách khác cho bài viết nếu bài viết có tiêu đề bên trong và theo sau là một đoạn văn Bạn cũng có thể kết hợp Cũng có thể sử dụng các lớp giả như Sau đó, bạn cũng có thể sử dụng bộ kết hợp anh chị em chung Hãy thử bản demo CodePen Mặc dù bản demo này có thể không phải là ví dụ thực tế nhất, nhưng tất cả điều này vẫn bắt đầu trở nên thú vị, phải không? sử dụng. phải điều chỉnh LướiLưới CSS thường hoạt động từ vùng chứa trong và trước Vì vậy, nếu vùng chứa Grid của chúng ta có một phần tử bên trong vừa là phần tử con thứ hai vừa là phần tử con cuối cùng của vùng chứa, thì lưới phải có hai cột. Điều tương tự cũng hoạt động với ba cột Cuối cùng, chúng ta cũng có thể tạo bố cục lưới có bốn cột nếu vùng chứa có bốn thành phần trở lên bên trong. Để đạt được điều này, chúng tôi chọn ít nhất một phần tử là phần tử thứ tư hoặc một trong tất cả các phần tử sau Đây là bản demo CodePen một lần nữa Như bạn có thể thấy, có rất nhiều trường hợp sử dụng tuyệt vời cho Nhưng chờ đợi, có nhiều hơn nữa có như một bộ chọn anh chị em trước đóBởi vì Dùng thử trên CodePen Một lần nữa, có rất nhiều trường hợp sử dụng thực tế cho việc này. Ví dụ: bạn có thể tạo kiểu khác cho hình ảnh khi có chú thích bên dưới hình ảnh đó Khả năng sử dụng Kiểm tra hỗ trợHiện tại, Safari là trình duyệt duy nhất hỗ trợ Do đó, bạn có thể nhắm mục tiêu hỗ trợ các trình duyệt theo cách thân thiện trong tương lai. Bởi vì một khi Bạn có thêm ý tưởng nào về cách sử dụng Làm cách nào để chọn con đầu lòng bằng CSS?Các. bộ chọn con đầu tiên được sử dụng để chọn bộ chọn đã chỉ định, chỉ khi đó là bộ chọn con đầu tiên của bộ chọn cha.
CSS có bộ chọn gốc không?Các phiên bản đầu tiên của bộ chọn cấp độ gốc đã được soạn thảo cho CSS3, chỉ được hoãn lại. Cuối cùng, các. has() lớp giả đã được xác định chính thức trong Bộ chọn CSS cấp 4 . |
