Làm cách nào để bạn nhắm mục tiêu phần tử tiếp theo trong css?

Bộ chọn (“phần tử + tiếp theo”) trong jQuery được sử dụng để chọn phần tử “tiếp theo” của “phần tử” đã chỉ định. Bộ chọn này chỉ hoạt động khi phần tử “tiếp theo” được đặt ngay sau phần tử đã chỉ định.  

Ví dụ.  

  • Nếu câu lệnh là $(“div + p”) thì điều này sẽ chỉ chọn phần tử “p” đầu tiên nằm ngay bên cạnh “div” và phần tử “p” khác sẽ bị bỏ qua.  
  • Nhưng nếu câu lệnh là $(“div + p”) và “h1” được đặt ở giữa phần tử “div” và “p” đã chọn thì bộ chọn này sẽ không hoạt động và phần tử “p” sẽ không hiệu quả

cú pháp.   

$("element + next")

Tham số. Ở đây, tham số là bắt buộc và điều này sẽ chỉ định bất kỳ phần tử hợp lệ nào

Giá trị trả về. Điều này sẽ trả về phần tử đã chọn với thay đổi đã chỉ định

ví dụ 1. Ở đây, phần tử đoạn nằm ngay bên cạnh phần tử div.   

HTML




<html>

<head>

  <0 12

3____48_______

  6_______45_______0>

  <0>

<3_______46_______4

<5<6

<7<8

<3______47_______0

  6_______45_______0>

  <html7>

<3_______48_______0

<5>2

<5>4

<5>6

<5>8

<5<0

<3______46_______2

<3_______46_______4

<5<6

<5>6

<3______46_______2

  6_______47_______7>

6head>

<head9>

  46_______>3_______48_______4>3>

  46_______>9  0>9>

  46_______>9  6>9>

6head9>

6html>

đầu ra.  

Làm cách nào để bạn nhắm mục tiêu phần tử tiếp theo trong css?

ví dụ 2. Ở đây, phần tử tiêu đề nằm giữa đoạn văn và phần tử div. Vì vậy, sẽ không có thay đổi nào xảy ra với phần tử “p”.   

Các trang web hiện đại được xây dựng dựa trên khái niệm tách biệt nội dung khỏi phần trình bày. HTML xác định cấu trúc của trang trong khi CSS áp dụng kiểu dáng. Trang mà người dùng tương tác là kết quả của nhiều tệp mã hoạt động cùng nhau trong sự thống nhất

Việc tách biệt nội dung và cách trình bày có giá trị vì nhiều lý do, nhưng điều đó có nghĩa là các quy tắc kiểu dáng cần có khả năng nhắm mục tiêu thành phần mà chúng dự định từ một tệp khác. CSS đạt được điều này với bộ chọn

Sơ đồ quy tắc CSS

Bộ chọn chỉ định phần tử nào trong HTML mà một tập hợp các khai báo được cho là nhắm mục tiêu. Có nhiều loại bộ chọn giúp dễ dàng duyệt qua DOM. Tùy thuộc vào các nhà phát triển để biết cái tốt nhất để sử dụng cho nhiệm vụ hiện tại

Bộ chọn CSS

Nhãn

Chọn một phần tử bằng thẻ HTML của nó là cách rõ ràng nhất. Bao gồm các phần tử gốc trong bộ chọn làm tăng tính đặc hiệu

ul li { … }

Bộ kết hợp

Sử dụng bộ kết hợp là một cách hiệu quả để tinh chỉnh bộ chọn thẻ. Bộ kết hợp giúp dễ dàng nhắm mục tiêu con cháu và anh chị em của các phần tử. Chẳng hạn, bộ chọn sau sẽ chỉ nhắm mục tiêu các phần tử

ul > li { … }
4 là hậu duệ trực tiếp của một
ul > li { … }
5. Mọi phần tử
ul > li { … }
4 lồng nhau sẽ bị loại trừ

ul > li { … }

Có ba loại tổ hợp. con, anh chị em liền kề và anh chị em chung

ul > li { … }
7 Con. nhắm mục tiêu con ngay lập tức của một phần tử

ul > li { … }
8 Anh chị em hàng xóm. nhắm mục tiêu anh chị em liền kề sau của một phần tử

ul > li { … }
9 Anh chị em chung. nhắm mục tiêu tất cả các anh chị em sau đây của một phần tử

TÔI

Thêm thuộc tính ID vào phần tử HTML là cách phổ biến để CSS nhắm mục tiêu nó. Hãy nhớ rằng ID chỉ có thể được sử dụng một lần trên trang HTML. Trong biểu định kiểu, ký tự

#main-menu { … }
0 biểu thị ID

#main-menu { … }

Tầng lớp

Không giống như ID, các thuộc tính lớp có thể được áp dụng cho nhiều thành phần, giúp dễ dàng sử dụng đi sử dụng lại cùng một kiểu khai báo. Điều này đặc biệt hữu ích để giữ mã KHÔ. Bộ chọn lớp được tiến hành bởi ký tự

#main-menu { … }
1

.menu-item { … }

Thuộc tính

Các yếu tố như liên kết và đầu vào biểu mẫu có xu hướng yêu cầu nhiều thuộc tính để hoạt động bình thường. Thay vì thêm nhiều thuộc tính hơn để đặt một lớp hoặc ID, bộ chọn thuộc tính có thể được sử dụng để nhắm mục tiêu các phần tử cụ thể. Khai báo thuộc tính được đặt bên trong

#main-menu { … }
2

input[type=”checkbox”] { … }

Kết hợp chuỗi con

Bộ chọn thuộc tính có thể được chỉ định thêm với khớp chuỗi con bằng cách so sánh các chữ cái hoặc toàn bộ từ với giá trị của thuộc tính. Đoạn mã sau sẽ chọn các phần tử neo có giá trị href bắt đầu bằng các chữ cái “https. //”, chỉ nhắm mục tiêu hiệu quả các liên kết bên ngoài

a[href^=”https://”] { … }

#main-menu { … }
3 khớp với các ký tự ở đầu một giá trị

#main-menu { … }
4 khớp với các ký tự ở cuối một giá trị

#main-menu { … }
5 khớp với bất kỳ phần nào của giá trị

lớp giả

Các lớp giả là một cách thuận tiện để chọn các phần tử dựa trên trạng thái hoặc vị trí của chúng trong DOM. Cú pháp hoạt động bằng cách nối thêm lớp giả mong muốn vào thẻ, ID hoặc tên lớp

li:first-child { … }

Dưới đây là một vài lớp giả hữu ích

#main-menu { … }
6 chọn phiên bản đầu tiên của một phần tử so với phần tử gốc của nó

#main-menu { … }
7 chọn phiên bản cuối cùng của một phần tử so với phần tử gốc của nó

#main-menu { … }
8 chọn các phần tử là con duy nhất của cha mẹ

#main-menu { … }
9 chọn các phần tử không chứa bất kỳ nội dung nào

.menu-item { … }
0 chọn phần tử con thứ n của phần tử cha được chỉ định bởi giá trị chỉ mục được cung cấp trong ngoặc đơn

.menu-item { … }
1 giống như
.menu-item { … }
2, nhưng chỉ lập chỉ mục các phần tử có cùng thẻ được chỉ định

.menu-item { … }
3 chọn tất cả các phần tử ngoại trừ phần tử được chỉ định trong dấu ngoặc đơn

Có nhiều lớp giả khác ngoài những lớp được liệt kê ở đây. Kiểm tra Mạng nhà phát triển Mozilla để biết danh sách đầy đủ với các ví dụ

Ví dụ bộ chọn

Số lượng bộ chọn CSS để chọn có nghĩa là thường có nhiều cách để chọn một thành phần HTML. Lấy ví dụ về khối mã sau


”logo”

Đánh dấu này cung cấp cấu trúc cho một tiêu đề đơn giản với logo và liên kết mạng xã hội. Hãy xem một vài cách khác nhau để nhắm mục tiêu danh sách không có thứ tự

ul { .. }

Vì danh sách không có thứ tự là danh sách duy nhất trong trường hợp này nên chỉ riêng thẻ

ul > li { … }
5 là đủ để chọn

#social-menu { … }

Sử dụng ID mang lại độ chính xác cao hơn nhiều trong trường hợp các danh sách không có thứ tự khác được đưa vào sau

ul > li { … }
0

Mặc dù hơi phức tạp, nhưng việc chọn phần tử con cuối cùng trong số các phần tử con trực tiếp của

.menu-item { … }
5 cũng nhằm vào phần tử mong muốn. Điều quan trọng cần lưu ý là nếu không có bộ kết hợp con thì con cuối cùng của mỗi con cháu của
.menu-item { … }
5 cũng sẽ được chọn

Các lớp giả

.menu-item { … }
7 hoặc
.menu-item { … }
8 hoặc thậm chí
.menu-item { … }
9 cũng sẽ hoạt động trong ví dụ trước, nhưng
input[type=”checkbox”] { … }
0 có ý nghĩa nhất ở đây

Rõ ràng là có nhiều cách để chọn một phần tử — một số cách đơn giản hơn những cách khác — nhưng còn việc tiếp cận một phần tử được lồng sâu hơn thì sao?

ul > li { … }
1

Lớp giả

#main-menu { … }
6 nhắm mục tiêu danh sách đầu tiên, làm cho việc chọn hậu duệ
input[type=”checkbox”] { … }
2 trở nên đơn giản

ul > li { … }
2

Thuộc tính thay thế cho hình ảnh mong muốn là thuộc tính duy nhất có giá trị “facebook”. Bộ chọn thuộc tính hoạt động hoàn hảo cho việc này

ul > li { … }
3

Bộ chọn này cũng tìm kiếm một giá trị thuộc tính, nhưng sử dụng ký hiệu khớp với

#main-menu { … }
5 để chỉ định một liên kết có chứa từ “facebook”. Hình ảnh được đề cập là hậu duệ của neo duy nhất trong ví dụ này hướng đến Facebook — một sự phù hợp hoàn hảo

Bộ chọn CSS sử dụng thẻ, ID hoặc lớp của phần tử thường đủ cho phần lớn dự án. Bộ chọn thuộc tính và lớp giả ít được sử dụng hơn, nhưng có thể cứu cánh khi HTML khó truy cập hoặc sửa đổi. Thực tiễn tốt nhất là sử dụng bộ chọn đơn giản nhất có thể trong khi vẫn duy trì độ đặc hiệu tối thiểu được yêu cầu

Sử dụng các bộ chọn thích hợp sẽ giúp giữ cho HTML sạch sẽ và CSS được tổ chức. Nếu bạn thấy mình phụ thuộc nhiều vào một loại bộ chọn cụ thể, hãy thử phân nhánh và sử dụng các phương pháp khác có thể phù hợp hơn

Ngoài ra, thật hài lòng khi đưa ra một bộ chọn hùng hồn cho một yếu tố đặc biệt khó tiếp cận