:focus-within伪类：当节点或其子节点获得焦点时激活。借用MDN的例子https://jsfiddle.net/d4w8h2ge/当点击表单中的文本框时，需要高亮整个表单元素。但是获取表单内部文本框的焦点并不代表表单元素本身就有焦点，所以使用form:focus不生效，这时可以使用:focus-within。当然，这也是:focus-within的典型用法之一。使用绑定点击事件的正常方法实现下拉框组件回到正题，这是一个使用JS实现的下拉框：https://jsfiddle.net/omo6cov2/1/为了实现这个下拉框，你通常(*)需要绑定两个点击事件：一个在a标签上打开下拉框；一个在身体上关闭下拉框。在正文的点击事件处理程序中，您必须确定该事件不能是来自下拉框内部的点击。还得记得在去掉下拉的时候去掉这个事件（比如单页程序切换路由）。还有两个问题：由于事件绑定在body上，所以在下拉框关闭的时候也会触发，造成不必要的开销。如果页面嵌入了iframe，点击iframe外的元素不会触发iframe内的click事件，所以点击iframe外无法关闭下拉框。使用：focus-within实现下拉框组件这是一个使用：focus-within实现下拉框组件：https://jsfiddle.net/2vnn7fa4/1/原理：点击链接时，a元素获得焦点并激活父元素:focus-within除了将.dropdown:not(.open)改为.dropdown:not(:focus-within)之外，还有一个重点：ul标签本身（及其父元素）无法获得焦点，所以点击下拉框内部时，默认会清除整个文档的焦点。解决方案很简单：将tabindex属性添加到ul标签。另外：Chrome的devtool中有一个Forcestate->:focus-within，调整样式的时候不要忘记选择浏览器支持率，edge需要更努力（*）：当然，如果你坚持上的一个元素我可以毫无问题地将点击事件放入文档的点击事件中。
