Css không (: có con)

Lớp giả CSS

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 là một trong những tính năng được chờ đợi nhất trong nhiều năm. Đó là bộ chọn CSS cấp 4, hiện khả dụng dưới dạng tính năng được hỗ trợ đầy đủ trong Chrome 105 trở đi và cũng có khả năng sẽ sớm trở thành tính năng thông thường trên các trình duyệt khác

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 trong CSS là một lớp giả quan hệ cho phép bạn kiểm tra xem một phần tử đã cho có chứa các phần tử con nhất định hay không, chọn nó nếu tìm thấy bất kỳ kết quả khớp nào và sau đó tạo kiểu cho nó

Bài viết này giải thích sự cần thiết của bộ chọn

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1, cách sử dụng chung của nó, các ứng dụng và trường hợp sử dụng khác nhau từ đơn giản đến nâng cao, khả năng tương thích với trình duyệt và các dự phòng

nội dung

• Tại sao bộ chọn

  let el = document.querySelector(".someElement"),
      elParent = null
  
  if(el) {
    elParent = el.parentNode
  }
  

  1 lại cần thiết?
• Kích hoạt hỗ trợ cho bộ chọn

  let el = document.querySelector(".someElement"),
      elParent = null
  
  if(el) {
    elParent = el.parentNode
  }
  

  1
• Bộ chọn CSS

  let el = document.querySelector(".someElement"),
      elParent = null
  
  if(el) {
    elParent = el.parentNode
  }
  

  1 làm gì?
• kịch bản sử dụng
  • Lựa chọn cha mẹ
  • Kiểm tra nhiều trẻ em
  • Chọn anh chị em trước đó
  • trang trí có điều kiện
  • Tạo kiểu cho các trạng thái trống
  • Điều chỉnh loại và chặn
  • CTA được biểu tượng hóa
  • điều chỉnh bố cục
  • Khả năng sử dụng hình thức tốt hơn
• Kiểm tra hỗ trợ trình duyệt

Tại sao bộ chọn let el = document.querySelector(".someElement"), elParent = null if(el) { elParent = el.parentNode } 1 lại cần thiết?

Hầu hết các nhà phát triển dựa vào JavaScript cho một số tính năng mà CSS không hỗ trợ theo mặc định. Tuy nhiên, các trình duyệt web ngày nay mạnh mẽ hơn bao giờ hết, điều này đang mở ra nhiều cánh cửa cho nhiều tính năng CSS mới và thú vị

Bộ chọn

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 là một tính năng như vậy. Nó hoạt động trên phần tử gốc chứ không phải phần tử con và sử dụng danh sách các bộ chọn được phân tách bằng dấu phẩy làm đối số, sau đó tìm kiếm các kết quả khớp giữa các phần tử con của phần tử mà nó đại diện. Chức năng của nó tương tự như phương thức jQuery

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

9

Hãy xem xét một số nhu cầu chung đối với bộ chọn

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 trong quá trình phát triển giao diện người dùng để giải thích lý do tại sao tính năng này lại có nhu cầu cao như vậy trong nhiều năm

Đầu tiên là khả năng kiểm tra xem một phần tử có chứa một số phần tử khác hay không, sau đó tạo kiểu cho phần tử đó cho phù hợp. JavaScript là cách duy nhất để làm điều này trước đây, như bạn có thể thấy ở đây

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

0

Trong đoạn mã trên, chúng tôi đã sử dụng

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

11, đây là phương pháp API Web để kiểm tra phần tử phân chia cho tiêu đề. Phương thức này trả về một NodeList gồm các phần tử được cung cấp

Một NodeList trống có nghĩa là không có phần tử nào có trong cha mẹ trực tiếp. Một triển khai ở trên có thể được tìm thấy ở đây. Hoặc, bạn có thể xem giải pháp thay thế CSS

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 tại đây

Thứ hai là khả năng chọn phần tử cha từ phần tử con. Một lần nữa, do thiếu cơ sở CSS để làm như vậy, các nhà phát triển đã dựa vào thuộc tính parentNode của API Web

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

Xem bản demo CodePen của mã ở trên tại đây và cách bộ chọn

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 triển khai điều này tại đây

Cuối cùng, có khả năng chọn anh chị em trước đó của một phần tử nhất định. Bộ chọn anh chị em trong CSS cho phép bạn chọn anh chị em tiếp theo, nhưng không có cách duy nhất CSS để chọn anh chị em trước đó. Việc triển khai JavaScript trông như thế này (xem bản trình diễn CodePen tại đây)

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1

Bạn có thể xem cách thực hiện hành động này với bộ chọn

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 tại đây

Mọi thứ chúng tôi đã làm ở trên với JavaScript hiện có thể đạt được với CSS

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1. Chúng ta sẽ lần lượt đề cập đến chúng trong phần tiếp theo sau khi tìm hiểu cách bật và kiểm tra tính năng này trên Google Chrome

Kích hoạt hỗ trợ cho bộ chọn let el = document.querySelector(".someElement"), elParent = null if(el) { elParent = el.parentNode } 1

Nếu bạn đang sử dụng phiên bản Chrome cũ hơn (v. 101-104), bạn có thể bật tính năng này từ cờ Chrome. Đảm bảo bạn có Chrome 101+ và điều hướng đến chrome. // cờ từ thanh địa chỉ của trình duyệt

Đặt các tính năng Nền tảng web thử nghiệm thành Đã bật và bạn đã sẵn sàng để sử dụng. Khởi chạy lại trình duyệt và bạn có thể làm việc với CSS

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 trong trình duyệt Chrome của mình

Bộ chọn CSS let el = document.querySelector(".someElement"), elParent = null if(el) { elParent = el.parentNode } 1 làm gì?

Hãy cùng khám phá lớp giả

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1, cách sử dụng và các thuộc tính của nó. Bởi vì nó là một lớp giả, nên nó có thể được gắn vào bất kỳ bộ chọn nào bằng dấu hai chấm và chấp nhận các lớp, ID và thẻ HTML làm tham số

Đoạn mã dưới đây giải thích cách sử dụng và cú pháp chung của nó. Lớp

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

20 chỉ được chọn nếu nó chứa các phần tử được truyền cho nó dưới dạng tham số bằng cách sử dụng lớp giả

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

9

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

2

khả năng xâu chuỗi

Bạn có thể xâu chuỗi nhiều lớp giả

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 lần lượt bất cứ khi nào bạn thấy phù hợp. Đoạn mã dưới đây minh họa cách hoạt động của chuỗi này

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

6

Danh sách đối số cho nhiều lựa chọn

Bạn cũng có thể cung cấp danh sách nhiều bộ chọn phần tử, tương tự như chuỗi, nhưng hiệu quả hơn nhiều

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

7

Uyển chuyển

Giả sử bạn đã vô tình cung cấp một bộ chọn phần tử không hợp lệ cho lớp giả

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1. Nó đủ thông minh để bỏ qua điều đó và chỉ xem xét các bộ chọn hợp lệ

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

9

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

24 và

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

25 là bộ chọn không hợp lệ và sẽ bị bỏ qua trong trường hợp trên. Bạn sẽ không thấy cảnh báo hoặc lỗi CSS nào trong công cụ dành cho nhà phát triển

kịch bản sử dụng

Hãy xem xét một số tình huống ví dụ trong đó bộ chọn CSS’

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 có ích

Lựa chọn cha mẹ

Đây có thể là cách sử dụng phổ biến nhất của bộ chọn

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1, bởi vì hành vi mặc định của nó là chọn thứ gì đó nếu nó chứa một tập hợp các phần tử cụ thể. Nhưng nếu chúng ta chỉ biết phần tử con thì sao?

Bộ chọn chung (

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

28) có thể được sử dụng ở đây với

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 và bộ kết hợp con (

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

60) để nhanh chóng chọn cha mà không cần biết gì về nó

Chọn cha từ con bằng CSS has()

Không có mô tả

Kiểm tra nhiều trẻ em

Như đã thảo luận trong phần thuộc tính ở trên,

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 cho phép bạn chuyển một danh sách gồm nhiều thực thể, nghĩa là bạn có thể kiểm tra bao nhiêu bộ chọn tùy ý trong một phần tử nhất định

Kiểm tra nhiều phần tử với CSS has()

Lorem ipsum dolor sit amet consectetur adipisizing elit. Ab pariatur, obcaecati accusantium bí danh trừ đi việc đẩy lùi itaque amet libero dirtyi maiores consectetur quasi. Eligendi ratione eaque et tenetur Giả định không cần phải đại diện. Unde, nemo cumque moltiae mollitia impedit voluptate quisquamlaborum ut, vitae aliquid totam numquam possimus dignissimos beatae quos corporis alias quod magnam quidem

 

Chọn anh chị em trước đó

Việc lựa chọn anh chị em trước đó được thực hiện bằng cách kết hợp bộ kết hợp anh chị em liền kề CSS với lớp giả

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1

Như bạn có thể đã biết, tổ hợp anh chị em liền kề chọn anh chị em tiếp theo của một phần tử đã cho. Chúng ta có thể sử dụng hành vi này với

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

9 để lấy anh chị em trước đó. Nói một cách đơn giản, nếu một phần tử có phần tử anh em tiếp theo, bạn có thể dễ dàng chọn phần tử đó bằng bộ kết hợp

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 và

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

65

CSS. has() – Chọn Anh chị em trước đó

I’m a paragraph element and my next sibling is an unordered list or

with some dummy content. I should turn green on getting selected using the `ul.select-my-previous-sibling` in `:has()`. I’m an unordered list. I have a CSS class: `.select-my-previous-sibling`. I’m here for dummy purpose.

trang trí có điều kiện

Có thể tránh tạo kiểu riêng cho những thứ có và không có các phần tử con nhất định bằng bộ chọn

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1. Phần tử hình có và không có chú thích là ví dụ hoàn hảo ở đây

Trang trí hình có điều kiện với CSS. có()

Không có mô tả

Điều gì xảy ra nếu một phần tử

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

67 ở đó, nhưng không chứa bất kỳ văn bản nào?

Tương tự như trang trí hình, chúng ta có thể dễ dàng chuyển đổi căn chỉnh văn bản của các trích dẫn khối có nhiều hơn một đoạn văn. Nhìn thấy nó trong hành động ở đây

Tạo kiểu cho các trạng thái trống

Chúng tôi đã có một pseudo-class tên là

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

69 cho các phần tử tạo kiểu không chứa gì. Đối với việc nhắm mục tiêu vào trạng thái trống, nó không hoạt động như mong đợi. Một khoảng trắng bên trong là đủ để nó nhận ra một phần tử là không trống

Không lý tưởng để sử dụng

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

69 trong trường hợp này. Hãy tạo một lưới thẻ cũng chứa một số thẻ không có nội dung. Chúng tôi sẽ tạo kiểu cho các trạng thái thẻ trống bằng bộ chọn

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1

Tạo kiểu cho các trạng thái trống bằng CSS. có()

Không có mô tả

Điều chỉnh loại và chặn

Trong khi tạo kiểu cho một bài viết, việc giữ cho các phần tử kiểu và khối được căn chỉnh là một công việc khó khăn. Hãy xem xét một ví dụ về việc trộn các khối mã, số liệu và dấu ngoặc kép với các phần tử loại chung

Các phần tử khối nên có nhiều khoảng cách dọc và trang trí hơn để nổi bật giữa các thực thể kiểu chữ khác nhau. Đây là một số CSS để xử lý điều đó

---

Hơn 200 nghìn nhà phát triển sử dụng LogRocket để tạo ra trải nghiệm kỹ thuật số tốt hơn

Tìm hiểu thêm →

---

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

9

Đoạn mã trên sẽ tạo ra khoảng cách dọc không đồng đều giữa các tiêu đề và các phần tử khối, như được hiển thị ở đây. Nhưng có thể bù đắp cho những điểm bất thường này bằng cách sử dụng bản hack lựa chọn anh chị em trước đó

Điều chỉnh loại và khối bằng CSS. có()

Lorem, ipsum dolor sit amet consectetur adipisizing elit. Fugit Corti perferendis quod workingum giải thích lý do quidem laudantium officia odit vitae, quisquam ullam aliquid voluptate consequatur eos quis ducimus, aperiam. Hic tenetur modi giải thích về sự cố, obcaecati fugiat dosequuntur asperiores aliquid, eius, atque ullam unde. Aut et moltias eaque repudiandae

CTA được biểu tượng hóa

Giả sử bạn đang tạo CTA hoặc thành phần nút trong CSS với hai biến thể. nút đầu tiên là nút mặc định, đơn giản và nút thứ hai có biểu tượng

Bây giờ, nếu bạn dự định viết hai lớp riêng biệt cho điều đó, có thể dễ dàng tránh được điều đó với bộ chọn

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1. Điều hấp dẫn là chỉ cần kiểm tra phần tử

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

74 cho một phần tử con

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

75 và sau đó tạo kiểu cho phù hợp

CTA được biểu tượng hóa đơn giản với CSS. có()

Không có mô tả

điều chỉnh bố cục

Giả sử bạn có hai biến thể bố cục cho thành phần tiêu đề. một là chiều rộng cố định, và một là chất lỏng, tất nhiên

Để giữ nội dung của tiêu đề trong một chiều rộng cố định, chúng ta phải thêm một phần tử bao bọc nội dung bên trong nó. Sự khác biệt duy nhất giữa đánh dấu của hai phiên bản tiêu đề này là phần tử bao bọc

Sau đó, chúng ta có thể ghép nối bộ chọn

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 với bộ chọn

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

77 và thêm các lớp CSS, như thể hiện trong minh họa bên dưới

Điều chỉnh trình bao bọc với. có()

Không có mô tả

Một ví dụ khác về điều chỉnh bố cục có thể là sửa đổi số cột trong lưới ngay khi chúng đạt đến một số nhất định

Điều này có thể hữu ích khi bạn không sử dụng hàm

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

78 xác định chiều rộng tốt nhất để vừa với một cột trong lưới của nó

---

Các bài viết hay khác từ LogRocket

• Đừng bỏ lỡ một khoảnh khắc nào với The Replay, một bản tin được tuyển chọn từ LogRocket
• Tìm hiểu cách Galileo của LogRocket loại bỏ tiếng ồn để chủ động giải quyết các sự cố trong ứng dụng của bạn
• Sử dụng useEffect của React để tối ưu hóa hiệu suất ứng dụng của bạn
• Chuyển đổi giữa nhiều phiên bản của Node
• Khám phá cách tạo hoạt ảnh cho ứng dụng React của bạn với AnimXYZ
• Khám phá Tauri, một khuôn khổ mới để xây dựng các tệp nhị phân
• So sánh NestJS với. Thể hiện. js

---

Điều chỉnh Lưới theo số lượng mục bằng CSS. có()

Không có mô tả

Như bạn có thể thấy ở trên, lưới sẽ tự động điều chỉnh thành ba cột ngay khi nó vượt quá hai mục

Khả năng sử dụng hình thức tốt hơn

Tính tương tác được xác định tốt nhất khi nó được kết nối đúng cách với phản hồi. Khi nói đến các biểu mẫu HTML tương tác, cung cấp cho người dùng phản hồi về đầu vào của nó là điều tốt nhất bạn có thể làm

Với sự trợ giúp của các lớp giả

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1,

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

90 và

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

91, chúng tôi có thể làm cho các biểu mẫu của mình năng động hơn rất nhiều và không có JavaScript liên quan

Biểu mẫu HTML tương tác với CSS. có()

Không có mô tả

Kiểm tra hỗ trợ trình duyệt

Các ví dụ được thảo luận ở trên hiển thị hộp thoại báo lỗi nếu không tìm thấy hỗ trợ cho bộ chọn

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1. Điều này có thể được thực hiện bằng quy tắc CSS

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

93, như được hiển thị trong đoạn mã bên dưới

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1

Trên đây là cách tiến bộ để kiểm tra hỗ trợ và tạo kiểu cho phần tử theo yêu cầu. Nếu một cơ sở mã sử dụng trực tiếp một số tính năng mới, thì đây là cách để viết các phiên bản tương thích ngược của cùng một mã

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

2

Điều tương tự cũng có thể được sử dụng để nhắc người dùng nếu không tìm thấy hỗ trợ nào

Bạn cũng có thể sử dụng API hỗ trợ trong JavaScript để phát hiện trình duyệt hỗ trợ các tính năng khác nhau. Đây là một ví dụ về việc kiểm tra hỗ trợ

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 hoàn toàn bằng JavaScript

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

0

Phần kết luận

Trong bài viết trên, chúng ta đã tìm hiểu về

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1, bộ chọn CSS cấp 4. Chúng tôi đáp ứng các nhu cầu của nó, một số trường hợp nó có thể thay thế JavaScript trong các dự án giao diện người dùng của bạn và các trường hợp sử dụng chung đến nâng cao

Chúng tôi cũng đã thảo luận về hỗ trợ hiện tại được cung cấp bởi các trình duyệt khác nhau và tìm hiểu cách kiểm tra hỗ trợ của trình duyệt

Cảm ơn vì đã đọc hết. Tôi hy vọng bạn đã học được điều gì đó mới thông qua điều này. Vui lòng chia sẻ thêm các ví dụ về cách

let el = document.querySelector(".someElement"),
    elParent = null

if(el) {
  elParent = el.parentNode
}

1 có thể hữu ích trong các nhận xét

Giao diện người dùng của bạn có ngốn CPU của người dùng không?

Khi giao diện người dùng web ngày càng phức tạp, các tính năng ngốn tài nguyên ngày càng đòi hỏi nhiều hơn từ trình duyệt. Nếu bạn quan tâm đến việc giám sát và theo dõi mức sử dụng CPU phía máy khách, mức sử dụng bộ nhớ, v.v. cho tất cả người dùng của bạn trong sản xuất, hãy thử LogRocket. https. // tên lửa. com/đăng ký/

LogRocket giống như một DVR dành cho ứng dụng web và thiết bị di động, ghi lại mọi thứ xảy ra trong ứng dụng web hoặc trang web của bạn. Thay vì đoán lý do tại sao sự cố xảy ra, bạn có thể tổng hợp và báo cáo về các chỉ số hiệu suất chính của giao diện người dùng, phát lại các phiên của người dùng cùng với trạng thái ứng dụng, ghi lại các yêu cầu mạng và tự động hiển thị tất cả các lỗi