1. 首页
  2. css

CSS不要用逗号分隔:如果您需要深度浏览器支持,请将焦点放在内部

我真的很喜欢:focus-within。它是一个非常有用的选择器,允许您在任何子元素处于焦点时基本上选择父元素。
假设您想在悬停时显示一些额外的内容…
div:hover .extra-stuff {/* reveal it */}
这对键盘不是特别友好。但是,如果.extra-stuff中的某些内容是tab-able(意味着它可以被聚焦),那就意味着你可以这样写以使它更容易访问:
div:hover .extra-stuff,div:focus-within .extra-stuff {/* reveal it */}
这很好,但是它会导致一个棘手的问题。
如果浏览器不理解整个选择器的任何部分,它就会忽略它们。所以,如果你正在处理一个不支持:focus-within的浏览器,那么它会忽略上面的CSS示例,这意味着你也失去了:hover的状态。
相反:
div:hover .extra-stuff {/* reveal it */}div:focus-within .extra-stuff {/* reveal it */}
这样更安全。但这是重复的。如果你有一个像Sass这样的预处理器……8***我会说这是一个很好的使用本机CSS混合的用例

CSS不要用逗号分隔:如果您需要深度浏览器支持,请将焦点放在内部 为WP2原创文章,链接:https://www.wp2.cn/css/css%e4%b8%8d%e8%a6%81%e7%94%a8%e9%80%97%e5%8f%b7%e5%88%86%e9%9a%94%ef%bc%9a%e5%a6%82%e6%9e%9c%e6%82%a8%e9%9c%80%e8%a6%81%e6%b7%b1%e5%ba%a6%e6%b5%8f%e8%a7%88%e5%99%a8%e6%94%af%e6%8c%81%ef%bc%8c/