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 未指出文件、测试或入口点。首先定位 HTML/CSS 编辑器和页面预览集成，然后追踪光标选择和 DOM 元素的表示方式。完成的标准是：选择器和标签能够在两个方向上以可见方式高亮其对应的预览元素，并将 jQuery 选择器作为可选扩展处理。