CSS có bộ chọn gốc không?

CSS bây giờ bao gồm một. có bộ chọn cho phép chúng tôi áp dụng các kiểu trên cơ sở những gì đang xảy ra bên trong một phần tử. Thường được gọi là bộ chọn cha, bộ. has() cho phép chúng ta đạt được điều này và hơn thế nữa

Chúng ta hãy xem bộ chọn tương đối này

- Quảng cáo -

div:has(img) {
  background: black;
}

Nó chỉ áp dụng nền nếu có một hình ảnh bên trong div, nếu không nó sẽ không. Cho nên

     
Nhưng trước khi ăn mừng "Safari là trên hết" lần này, hãy lưu ý rằng bạn có thể chưa có trình duyệt để kiểm tra bộ chọn gốc vào đầu năm 2022. Các bản cập nhật Safari hiện không được gửi hoặc cài đặt trên các hệ điều hành cũ hơn của Apple
Không còn "Thiếu từ CSS"
Giờ đây, các bộ chọn gốc không còn bị thiếu trong CSS nữa, hãy hy vọng rằng Firefox và Chromium sẽ nhanh chóng làm theo
"Bộ chọn cha" chọn gì?
Bộ chọn cha mẹ chọn các phần tử cha mẹ, phải không? 
Tôi không phải là người duy nhất coi 

     
Sau khi xem Byungwoo Lee trên YouTube, tôi có thể nói rằng chiến lược của công cụ Blink theo một cách nào đó tương tự như hiệu quả của một công cụ cờ vua phải tìm ra cách bỏ qua các nước đi không liên quan một cách nhanh chóng thay vì dự đoán mọi kết quả có thể xảy ra của mọi tổ hợp nước đi có thể có.
Trong trường hợp của CSS, công cụ Blink sẽ ngăn việc đi lên và vô hiệu hóa các phần tử không liên quan. Để giảm các tính toán lại không liên quan sau khi áp dụng kiểu, công cụ có thể đánh dấu nếu một kiểu bị ảnh hưởng bởi thay đổi trạng thái 

     
3 trong quá trình tính toán lại
Nhưng hãy để Byungwoo Lee giải thích chi tiết về các vấn đề và giải pháp triển khai bộ chọn gốc
Giải thích của ông bao gồm các trường hợp sử dụng phức tạp như
/* override template heading style */
body.is-act-index .cms-element-alignment:has(> h1) {
1
hoặc
/* override template heading style */
body.is-act-index .cms-element-alignment:has(> h1) {
2
Ồ. Tôi thậm chí không biết đó có thể là CSS hợp lệ
Không ngừng học hỏi. Nhưng vẫn không hiển thị mã như thế cho tôi trong phần đánh giá mã. Tôi có thể sẽ yêu cầu bạn cấu trúc lại nó thành thứ gì đó dễ hiểu và dễ bảo trì hơn cho bộ não con người
Trường hợp sử dụng thực tế
Như tôi thấy nhiều người đấu tranh để tạo ra các ví dụ về cách sử dụng bộ chọn has. bạn thật may mắn



Đây là một ví dụ thực tế. Tôi đã phải sửa nóng một chủ đề Shopware đã được sửa nóng trước đó và nó rất khẩn cấp và 
/* override template heading style */
body.is-act-index .cms-element-alignment:has(> h1) {
3, vì vậy ít nhất không có mã sạch nào ở phần đó của lộ trình
Tôi ước mình có thể sử dụng 

     
3 tại đây để giảm rủi ro vô tình nhắm mục tiêu sai các yếu tố trong đánh dấu do CMS tạo. Bộ chọn dài đến mức bạn phải cuộn để xem tất cả
/* override template heading style */
body.is-act-index .cms-sections .col-12 .cms-element-alignment.align-self-start {
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Sử dụng 
/* override template heading style */
body.is-act-index .cms-element-alignment:has(> h1) {
5 làm cho bản sửa lỗi ít nhất rõ ràng hơn một chút
/* override template heading style */
body.is-act-index .cms-element-alignment:has(> h1) {
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Chúng tôi có thể muốn viết mã đó chỉ vì mục đích dễ đọc. Nhưng chúng tôi phải đảm bảo hỗ trợ trình duyệt
Làm thế nào để Polyfill. has() Bộ chọn?
Vì không có cách nào để giải quyết các bộ chọn gốc trong cú pháp CSS gần đây, chúng không thể được dịch mã. Đừng hy vọng vào PostCSS hoặc SASS. Lần này, bạn sẽ cần JavaScript để điền vào các trình duyệt cũ hơn
"jQuery đã có. có bộ chọn trong kho vũ khí của nó về cơ bản là mãi mãi", Eric Ponto đã viết vào năm 2015 đã hiển thị một polyfill dựa trên jQuery

     
0
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Đố. Làm cách nào để điền đầy mà không cần sử dụng jQuery?
Làm bài kiểm tra và gửi giải pháp Vanilla JS của bạn

     
1
Vào chế độ toàn màn hình Thoát chế độ toàn màn hình
Nếu bạn biết giải pháp, bạn cũng có thể đăng nó dưới dạng câu trả lời cho câu hỏi StackOverflow nếu có một vanilla JS tương đương với jQuery. có()
truy vấnSelectorTất cả Với Có
Josh Larson's polyfill-css-has cung cấp một 
/* override template heading style */
body.is-act-index .cms-element-alignment:has(> h1) {
6 (cảm ơn @lukeshiru cho liên kết. )
Nhưng chúng tôi đã cố gắng sống mà không có bộ chọn gốc trong một thời gian dài, có lẽ chúng tôi không muốn lo lắng nữa mà chuyển sang các bản nâng cấp sắp tới cho ngôn ngữ CSS
Điều gì tiếp theo trong CSS?
Mong đợi điều gì từ CSS vào năm 2022?
Có nhiều tính năng hữu ích hơn đang được triển khai, chẳng hạn như Truy vấn bộ chứa CSS mà chúng tôi đã có thể sử dụng trong Chrome và Edge bằng cách bật chúng bằng cờ tính năng
Bài viết này là một phần của loạt bài nhỏ về các tính năng CSS mới (và bị đánh giá thấp) mà bạn có thể bắt đầu tìm hiểu và sử dụng vào năm 2022. Nếu bạn đang tìm kiếm thông tin tổng quan toàn diện về những điểm mới trong CSS vào năm 2022, hãy xem bài đánh giá của @this-is-learning về tình trạng báo cáo CSS 2022 và tìm thêm một số tài nguyên hữu ích trong dấu trang nhà phát triển 2021/2022 của tôi / 
 

			
Có bộ chọn gốc CSS không?
			
Hãy làm rõ ở đây, chỉ trong trường hợp ai đó tìm thấy điều này từ một công cụ tìm kiếm. không có bộ chọn gốc trong CSS, thậm chí không có trong CSS3
		
			
3 loại bộ chọn trong CSS là gì?
			
Bộ chọn đơn giản (chọn các phần tử dựa trên tên, id, lớp) Bộ chọn kết hợp (chọn các phần tử dựa trên mối quan hệ cụ thể giữa chúng) Bộ chọn lớp giả (chọn các phần tử dựa trên một trạng thái nhất định)
		
			
Làm cách nào để áp dụng CSS cho cha mẹ từ con?
			
Thật dễ dàng để áp dụng kiểu cho phần tử con, nhưng nếu bạn muốn áp dụng kiểu cho lớp cha đã có phần tử con, bạn có thể  sử dụng bộ kết hợp con của bộ chọn CSS ( . Ví dụ: div > p chọn tất cả các phần tử . For example, div > p selects all 
 elements where the parent is a 
 element.
		
			
5 bộ chọn CSS 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ả
 

                                    
Đọc tiếp