Visually connect tags, selectors, and elements on the page

In order to aid students’ understanding of the relationship between different bits of the code, it would be very cool to visually connect selectors to tags, and vice versa. E.g., if I place the cursor within a selector in the CSS code, we could subtly highlight (maybe with an outline) the tag(s) in the HTML that correspond to it. Similar thing with jQuery selectors (this is more of a bonus feature though).

As a corollary, placing the cursor in a tag should (subtly!) highlight the element on the page corresponding to that tag; placing the cursor in a CSS selector should highlight all elements on the page matching that selector.

Issue không nêu tên tệp, kiểm thử hay các điểm vào. Hãy bắt đầu bằng cách xác định trình chỉnh sửa HTML/CSS và phần tích hợp bản xem trước trang, sau đó theo dõi cách các vùng chọn con trỏ và các phần tử DOM được biểu diễn. Được xem là hoàn tất khi các selector và tag làm nổi bật rõ ràng các phần tử tương ứng trong bản xem trước theo cả hai chiều, trong đó các selector jQuery được coi là phần mở rộng tùy chọn.