Tôi có thể chọn một CSS anh em trước đó không?

Bộ kết hợp anh chị em liền kề (_______5_______) tách hai bộ chọn và chỉ khớp với phần tử thứ hai nếu nó ngay sau phần tử đầu tiên và cả hai đều là con của cùng một cha mẹ element

/* Paragraphs that come immediately after any image */
img + p {
  font-weight: bold;
}

former_element + target_element { style properties }

li:first-of-type + li {
  color: red;
}

<ul>
  <li>One</li>
  <li>Two!</li>
  <li>Three</li>
</ul>

Bảng BCD chỉ tải trong trình duyệt có bật JavaScript. Bật JavaScript để xem dữ liệu

Tìm thấy một vấn đề nội dung với trang này?

• Chỉnh sửa trang trên GitHub
• Báo cáo vấn đề nội dung
• Xem nguồn trên GitHub

Trang này được sửa đổi lần cuối vào ngày 29 tháng 9 năm 2022 bởi những người đóng góp MDN

Thật khó để tưởng tượng một trang web không có CSS ​​và ngày nay cũng có JavaScript. JavaScript cung cấp nhiều chức năng hơn cho trang web. Nhưng nếu bạn là người mới, bạn mới bắt đầu sự nghiệp webdev của mình và bạn có những ý tưởng sáng tạo nhưng bạn không có kiến ​​thức về JavaScript để thêm một số chức năng JavaScript đó vào thiết kế của mình, thì ở đây tôi sẽ giải thích cho bạn về một trong những ý tưởng đó như
Vì vậy, ở đây tôi giải thích cho bạn về bộ chọn phần tử anh chị em CSS Next và Previous (có PREVIOUS)
Trước tiên hãy nói về Bộ chọn anh chị em tiếp theo. -

Sử dụng bộ chọn anh chị em tiếp theo, bạn có thể thay đổi thuộc tính của phần tử ngay sau phần tử cụ thể khác của bạn hoặc bạn có thể nói bằng cách sử dụng công cụ này, bạn có thể thay đổi thuộc tính của phần tử anh chị em liền kề

Như bạn có thể thấy trong đoạn mã trên, có một dấu + ở giữa thẻ h1 và p, ở đây p là anh em liền kề với h1. Vì vậy, bây giờ nếu bạn di chuột qua h1, bạn có thể thấy sự thay đổi về thuộc tính của thẻ p

Sử dụng bộ chọn anh chị em tiếp theo chung, bạn có thể chọn bất kỳ hoặc tất cả các phần tử anh chị em kế tiếp trong khi sử dụng bộ chọn anh chị em tiếp theo, chúng tôi chỉ có thể chọn phần tử anh chị em liền kề

Như bạn có thể thấy trong đoạn mã trên, có một dấu ~ đăng nhập giữa thẻ h1 và p nhưng cũng có một thẻ h2 anh chị em khác ở giữa nhưng nó sẽ không ảnh hưởng và bạn có thể thay đổi các thuộc tính của thẻ p mặc dù p không phải là anh chị em liền kề tiếp theo
Nếu muốn, bạn cũng có thể thay đổi thuộc tính của h2 nằm giữa h1 và p, cùng với thay đổi thuộc tính của thẻ p

Cho đến giờ chúng ta đã nói về bộ chọn anh chị em tiếp theo, nhưng còn bộ chọn anh chị em trước đó thì sao?
Thật không may, trong CSS, chúng tôi không có bất kỳ bộ chọn anh chị em nào trước đó như vậy, nhưng có trong ax(ACSSSS) - Cú pháp biểu định kiểu xếp tầng tăng cường, chúng tôi có các bộ chọn anh chị em trước đó hoặc trước đó

Khi dùng ACSSSS nhớ thêm thư viện này vào file html của bạn. -

<script src="https://rouninmedia.github.io/axe/axe.js"></script>

Vào chế độ toàn màn hình Thoát chế độ toàn màn hình

Sử dụng bộ chọn anh chị em trước đó, chúng tôi có thể thay đổi các thuộc tính của phần tử ngay trước một phần tử cụ thể khác của bạn hoặc bạn có thể nói bằng cách sử dụng điều này, bạn có thể thay đổi các thuộc tính của phần tử ngay trước đó

Như bạn có thể thấy trong đoạn mã trên, có một ? . Vì vậy, bây giờ nếu bạn di chuột qua thẻ p, bạn có thể thấy các thay đổi trong thẻ h1

Sử dụng bộ chọn anh chị em trước đó chung, bạn có thể chọn bất kỳ hoặc tất cả các phần tử anh chị em trước đó hoặc trước đó trong khi sử dụng bộ chọn anh chị em trước đó, chúng tôi chỉ có thể chọn phần tử anh chị em trước đó ngay lập tức

Như bạn có thể thấy trong đoạn mã trên, có một. đăng nhập giữa thẻ p và h1, nhưng cũng có một thẻ h2 anh em khác ở giữa nhưng nó sẽ không ảnh hưởng và bạn có thể thay đổi các thuộc tính của thẻ h1 mặc dù h1 không phải là anh chị em ngay trước thẻ p
Nếu muốn, bạn cũng có thể thay đổi thuộc tính của h2 nằm giữa h1 và p, cùng với thay đổi thuộc tính của thẻ p. Điều này sẽ rõ ràng hơn bằng ví dụ dưới đây. -

Để biết thêm các thiết kế liên quan đến chủ đề này, hãy kiểm tra bút của tôi tại CodePen

Cảm ơn đã đọc đây là bài viết đầu tiên của tôi

Bất kì phản hồi nào cũng sẽ được đánh giá cao

Làm cách nào để chọn một phần tử đứng trước một phần tử khác trong CSS?

Bộ chọn nào được sử dụng để chọn anh chị em?

Bộ chọn anh chị em liền kề và bộ chọn anh chị em chung hoạt động như thế nào?

Là một bộ chọn anh chị em chung?