Hướng dẫn heap css selector - bộ chọn css đống

Tổng quan

Hướng dẫn này giả định rằng bạn đã có một sự hiểu biết cơ bản về HTML và CSS.

Nếu bạn chưa quen thuộc với các đối tượng này, chúng tôi khuyên bạn nên tham gia khóa học 30 phút & NBSP của chúng tôi về khóa học HTML & CSS & NBSP; cho người dùng phi kỹ thuật trước khi xem xét hướng dẫn này.

Phân cấp các yếu tố trên trang web

Như một sự bồi dưỡng ngắn gọn, một trang web được chia thành hai thành phần cơ bản: & nbsp; ____ ____ 8 & nbsp; và & nbsp; ____ 9. & Nbsp; ________ 8 & nbsp; chứa thông tin về những gì sẽ được tải trên trang, chẳng hạn như tập lệnh, kiểu và các yếu tố siêu dữ liệu khác. & Nbsp; ________ 9 & nbsp; là nơi tất cả nội dung HTML của trang được hiển thị, mặc dù nó cũng có thể chứa các tập lệnh và kiểu dáng.

Bộ chọn CSS

Bộ chọn CSS & NBSP; cho phép bạn nhắm mục tiêu các yếu tố HTML cụ thể và áp dụng các quy tắc kiểu dáng cho chúng, chẳng hạn như chỉ ra kích thước của chúng, nơi chúng nên ngồi liên quan đến các yếu tố khác trên trang, nếu có điều gì đó sẽ thay đổi nếu phần tử được lơ lửng hoặc nhấp vào trên, và nhiều hơn nữa. Để có phần giới thiệu chuyên sâu hơn về các bộ chọn CSS, hãy xem trang này trên & NBSP; Cách thức chọn của CSS.

Có một vài công cụ khác nhau trong đống bạn có thể sử dụng để xác định các sự kiện.

• Sử dụng Trình hiển thị sự kiện, là giao diện điểm và nhấp đơn giản của Heap, để xác định các sự kiện. Trong khi xác định một sự kiện mới thông qua trình hiển thị sự kiện, các bộ chọn CSS nhắm mục tiêu sự kiện đó được hiển thị trên trang Visualizer sự kiện. Hiểu thông tin này là hữu ích để xác nhận rằng bạn đã xác định chính xác sự kiện của mình.

• Sử dụng tab & nbsp; Event & nbsp; khi bạn xác định một sự kiện mới thông qua tab Sự kiện, nếu sự kiện là một nhấp chuột, gửi hoặc thay đổi theo loại, một trường sẽ xuất hiện để bạn xác định bộ chọn CSS.

Heap sử dụng các bộ chọn CSS để nhắm mục tiêu chọn các yếu tố trên trang web của bạn và theo dõi các tương tác liên quan đến sự kiện đó. Các bộ chọn CSS này ánh xạ trang web của bạn thông qua các thuộc tính trong HTML của bạn.

Tags

Thẻ xác định phân cấp các phần tử trên trang HTML. Chúng luôn được bao quanh bởi & nbsp; ________ 12 & nbsp; giá đỡ góc. Một số thẻ là sự kết hợp giữa các thẻ mở và đóng, trong khi các thẻ khác, được biểu thị bằng sự hiện diện của một chém phía trước & nbsp; ____ 13 & nbsp; trong thẻ, tự đóng. Hầu hết các thẻ đóng gói nội dung hoặc các thẻ khác.

Trong Heap, chúng tôi xác định hệ thống phân cấp của một phần tử riêng lẻ bằng cách mô tả các thẻ mở dẫn đến nó, cách nhau bởi không gian. Ví dụ, đối với các yếu tố thẻ phân cấp trên trang HTML đơn giản này:

  This is a cool tag

Chúng tôi có a & nbsp;

div span b

Ký hiệu này được sử dụng để ánh xạ dữ liệu thô đến các sự kiện trong Heap. Heap nắm bắt toàn bộ phân cấp từ phần tử trở lên, sau đó trong giao diện heap, bạn có thể sử dụng cú pháp trên để ánh xạ dữ liệu thô đó đến một hoặc nhiều phần tử trên trang của bạn.

Ký hiệu trên nắm bắt phần tử mà chúng tôi đang tìm cách nhắm mục tiêu trong ví dụ đơn giản của chúng tôi, mặc dù một bộ chọn như thế này có thể dễ dàng khớp với nhiều yếu tố trên một trang web phức tạp hơn. Hãy cùng hiểu cách chúng ta có thể sử dụng các thuộc tính, bao gồm ID và các lớp, để nắm bắt chính xác (các) phần tử chúng ta muốn trên các trang phức tạp hơn.

Thuộc tính

Các thuộc tính & nbsp; là các giá trị áp dụng các quy tắc cho một phần tử trên trang web, chẳng hạn như chỉ định chiều rộng và chiều cao của hình ảnh. Các thuộc tính luôn được chỉ định trong thẻ bắt đầu (hoặc thẻ mở) và thường bao gồm các cặp tên/giá trị như & nbsp; ________ 17, ex. & Nbsp; ________ 18.

Heap sử dụng các thuộc tính để ánh xạ dữ liệu trang web của bạn để truy cập các yếu tố của trang web. Các thuộc tính phổ biến được sử dụng trong các bộ chọn HEAP CSS là thẻ, ID và các lớp.

Để biết thêm thông tin về cách Heap sử dụng các thuộc tính trong các định nghĩa sự kiện, bao gồm danh sách các bộ chọn thuộc tính đơn giản mà bạn có thể sử dụng và danh sách các thuộc tính mà chúng tôi hiện không nắm bắt, xem phần & NBSP;

Data-Attributes

Thuộc tính dữ liệu là một cách tuyệt vời để lưu trữ thông tin thuộc tính bổ sung về các yếu tố HTML tiêu chuẩn, ngữ nghĩa mà không yêu cầu các bản hack khác như thuộc tính không chuẩn hoặc các thuộc tính bổ sung trên DOM.

Một thuộc tính dữ liệu rất đơn giản để thêm và xác định: bất kỳ thuộc tính nào trên bất kỳ phần tử nào có tên thuộc tính bắt đầu bằng

div span b

9 là thuộc tính dữ liệu.

ID

Thuộc tính ID có thể được sử dụng để bao gồm một tên duy nhất để áp dụng một bộ kiểu nhất định cho một yếu tố cụ thể trong hệ thống phân cấp của trang web của bạn. Một ID có nghĩa là hoàn toàn độc đáo. Điều đó có nghĩa là chỉ có một yếu tố trên một trang nên có một ID cụ thể.

Trong thẻ HTML, ID hiển thị dưới dạng thuộc tính có một giá trị chuỗi duy nhất, như thế này:

This is a span tag

Sử dụng ký hiệu bộ chọn CSS mà chúng tôi đã học ở trên, chúng tôi có thể bao gồm một ID ngay sau tên thẻ (không cần khoảng trống):

span#firstTag b

Bộ chọn này cho biết, chọn nhịp với ID của FirstTag và thẻ con & nbsp; ________ 14. Ký tự # băm được sử dụng để phân biệt ID với thẻ.

Ký hiệu này cho phép chúng tôi tránh vấn đề khớp nhiều yếu tố trên một trang. Tuy nhiên, nếu bạn có nhiều yếu tố được lồng trong thẻ ID không phải là duy nhất, chẳng hạn như trong ví dụ này:

This is a span and this is a second bold element

Ký hiệu ở trên có thể khớp sai cả các yếu tố & nbsp; ____ 14 & nbsp; Để ngăn chặn điều này xảy ra, bạn sẽ muốn sửa đổi HTML của mình để thêm ID (hoặc bất kỳ loại thuộc tính nào khác) vào phần tử đậm mà bạn muốn nắm bắt với bộ chọn CSS duy nhất.

Các lớp học

Giống như ID, thuộc tính lớp được sử dụng để bao gồm các tên bổ sung cho tất cả các yếu tố trang có nghĩa là có cùng một kiểu. Trong Heap, chúng tôi sử dụng các lớp như một phần của bộ chọn CSS để phù hợp với (các) phần tử phù hợp trên trang.

Đối với ví dụ này:

This is a span and this is a second bold element

Chúng tôi viết bộ chọn sau để chỉ truy cập phần tử đầu tiên của lớp màu xanh da trời. Các . Nhân vật thời gian được sử dụng để phân biệt lớp với thẻ.

span#firstTag b.blue

Chúng tôi thêm khoảng thời gian trước tên lớp và đặt nó sau thẻ. Nếu một ID có mặt, sau ID. Bây giờ chúng tôi đã giành chiến thắng, vô tình chọn phần tử khác & nbsp; ____ 22 & nbsp; vì nó không có một lớp màu xanh.

Nhãn ARIA

Các nhãn ARIA cung cấp một phương án thay thế cho một phần tử không có văn bản có thể nhìn thấy trên màn hình và thường được sử dụng để có khả năng truy cập có mục đích.

Heap được thiết lập để ưu tiên nhãn ARIA bất cứ khi nào có ý nghĩa để làm như vậy. Đối với mỗi phần tử trong hệ thống phân cấp, Heap sẽ rút ra một loại mã thông báo - ID, thuộc tính, lớp hoặc thẻ. Trong quá trình đánh giá, các thuộc tính được sắp xếp theo thứ tự ban đầu của chúng và mức độ ưu tiên được gán cho từng khóa thuộc tính cụ thể.

Ví dụ, các nhãn ARIA được ưu tiên dưới đây thuộc tính dữ liệu, được tính điểm trên hầu hết các thuộc tính khác. Bắt đầu từ các thuộc tính ưu tiên cao nhất, HEAP kiểm tra tính độc đáo của thuộc tính trong toàn bộ DOM và Subtree DOM cục bộ của nó. Nếu được chọn, nó được thêm vào bộ chọn và bất kỳ thuộc tính nào khác đều được bỏ qua.

Bởi vì ARIA-Label hiện là thuộc tính ưu tiên cao nhất, nếu nó phù hợp với tiêu chí độc đáo, nó có thể sẽ có mặt trong bộ chọn cuối cùng.

Thực tiễn tốt nhất để viết bộ chọn CSS

Bộ chọn chỉ cần phải cụ thể như bạn muốn. Bạn có thể để mọi thứ ra ngoài, miễn là để một cái gì đó ra ngoài không làm cho bộ chọn rộng hơn bạn dự định.

Có nhiều cách khác nhau để viết cùng một bộ chọn. Ví dụ, đối với HTML ở trên, tất cả các bộ chọn sau đều có ý nghĩa tương tự:

span b.blue
span .blue
#firstTag .blue
#firstTag b.blue
.blue
b.blue
.red .blue
.red b.blue
span#firstTag.red b.blue

Mỗi yếu tố của bộ chọn được phân tách bằng một không gian, nếu có một thẻ, đó phải là điều đầu tiên trong mỗi phần của bộ chọn. Sau đó, nếu ID có mặt và sử dụng, nó sẽ ngay lập tức theo dõi thẻ hoặc là đầu tiên nếu không có thẻ nào có mặt. Cuối cùng, bất kỳ lớp hoặc lớp nào cũng sẽ đến cuối cùng, sau khi một thẻ hoặc ID nếu chúng có mặt và có thể có nhiều hơn một lớp trên một phần tử.

Ảnh chụp nhanh

Là một sự bồi dưỡng, ảnh chụp nhanh cung cấp cho bạn khả năng nắm bắt thêm siêu dữ liệu về các hành động đang xảy ra trên trang web của bạn, chẳng hạn như văn bản được nhập vào hộp tìm kiếm. Tất cả các quy tắc được mô tả trước đó trong hướng dẫn này cho các bộ chọn cũng áp dụng cho các ảnh chụp nhanh, mặc dù chúng cũng cho phép thêm một vài quy tắc CSS.

Các lớp giả là các bộ chọn chỉ chọn các phần tử khi chúng ở trạng thái cụ thể, chẳng hạn như khi người dùng đang di chuột qua một cái gì đó. Chúng có thể được sử dụng trong các định nghĩa ảnh chụp nhanh, nhưng không phải là định nghĩa sự kiện thông thường, bởi vì các ảnh chụp nhanh chạy ở phía máy khách trong khi người dùng ở trên trang của bạn, vì vậy trạng thái cụ thể chỉ có sẵn tại thời điểm đó.

Đối với các trường hợp sử dụng ảnh chụp nhanh, xem & nbsp; ảnh chụp nhanh.

CSS động

Hãy cẩn thận khi sử dụng ID hoặc lớp CSS động, bao gồm hầu hết các ID bạn thấy với một chuỗi số ngẫu nhiên hoặc các lớp (như & NBSP; ____ 23) vì chúng có thể giới hạn dữ liệu được ghi lại trong phạm vi không có gì xuất hiện trong heap. Ngay cả khi dữ liệu không hiển thị lúc đầu, các định nghĩa sự kiện sử dụng CSS động sẽ bị phá vỡ khi trang web được cập nhật và tên lớp động thay đổi. Nếu bạn thấy không có người dùng đã hoàn thành hành động này trong phân tích của bạn, điều này có nghĩa là bạn có thể có lớp CSS động hoặc ID được chọn.

Phản ứng CSS

Các thư viện phản ứng thực hiện các mô-đun CSS thực hiện những việc không thông thường với mã HTML trên trang. Họ hoàn toàn có thể thay thế tên lớp ngữ nghĩa bằng các chuỗi ngắn, ngẫu nhiên. Chúng có thể lưu giữ một số thông tin hữu ích về mặt ngữ nghĩa, nhưng cũng có thể nối một chuỗi ngẫu nhiên vào cuối lớp, thay đổi trên mỗi bản dựng. Một số triển khai chỉ có thể sử dụng thuộc tính ID dữ liệu không có giá trị ngữ nghĩa (thường chỉ là một số) và đống đó, theo đó, không theo dõi.

Đối với các thực tiễn tốt nhất về việc sử dụng heap với các trang web React, xem & nbsp; sử dụng heap với các trang web React.