不要用逗号分隔 :focus-within，如果你需要深层浏览器支持

我非常喜欢 :focus-within。它是一个非常有用的选择器，允许您在任何子元素处于焦点时选择父元素。

假设您希望在悬停 <div> 时显示一些额外内容…

div:hover .extra-stuff {
  /* reveal it */
}

这不太适合键盘操作。但如果 .extra-stuff 中的某些内容可以被制表键（意味着可以聚焦），那么您可以这样写，使其更易于访问

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 这样的预处理器…

@mixin reveal {
  .extra-stuff {
     transform: translateY(0);
  }
}
div:hover {
  @include reveal;
}
div:focus-within {
  @include reveal;
}

查看 Pen
不用逗号分隔的 :focus-within 混入 by Chris Coyier (@chriscoyier)
on CodePen.

我认为这是原生 CSS 混合体的很好的用例。

Jon

# 2019 年 7 月 24 日

再次精彩，Chris！

只是想让你知道，嵌入的 CodePen 上没有显示效果，但在 CodePen.io 上可以正常显示！

Glenn

# 2019 年 7 月 24 日

不，这是一个很好的用例，可以让浏览器不因不理解逗号分隔选择器列表中的一个选择器而忽略整个规则集。

Chris Coyier

评论永久链接# 2019 年 7 月 25 日

您是否清楚地理解，如果更改这种行为，它会对整个网络产生什么影响？我知道浏览器对此非常谨慎，我的猜测是负面影响会相当大（破坏浏览器黑客等等，这些黑客不幸地已经存在于互联网上）。

Vadim

# 2019 年 7 月 24 日

它们那样忽略整个规则集真是太蠢了

Abanoub

# 2019 年 7 月 25 日

我使用 CSS 一年了，不知道浏览器在无法理解选择器部分时会忽略整个选择器。非常感谢。

Loren Helgeson

# 2019 年 7 月 28 日

有趣，但我不能只使用 :focus 来获得相同的结果吗？还是我漏掉了什么？

我一直在我所有的样式表中使用 :focus 来处理任何带有 :hover 属性的东西，最近才听说 :focus-within。

Michael Ball

# 2019 年 7 月 29 日

是的，我已经这样做了几年了，这是一个很棒的技术。不过，我更喜欢“反转”混合体的使用方式，这样我就可以在选择器定义中包含它。这在一定程度上隐藏了实现方式，因此其他开发人员不需要记住将选择器拆分成两个块。

@mixin hover-focus-within {
  &:hover {
    @content
  }

  &:focus-within {
    @content
  }
}

回答这个问题，为什么是这个选择器：它在子元素也获得焦点时应用，这对于表格行、图表和许多其他复杂操作非常有用。 https://mdn.org.cn/en-US/docs/Web/CSS/:focus-within

Jakob E

# 2019 年 8 月 18 日

关于 Sass 混合体的一点说明

您可以将混合体嵌套在选择器中，以避免在全局范围内命名冲突

.component-a  {
    @mixin content {
        color: red   
    }    
    &:hover { @include content }
    &:focus-within { @include content }
}

.component-b  {
    @mixin content {
        color: blue
    }    
    &:hover { @include content }
    &:focus-within { @include content }
}

这个解决方案的一个主要问题是您不能将混合体嵌套在混合体中

@mixin component-a {
    .component-a {
        @mixin content {  }  // not allowed
   }
}

为了解决这个问题，我们可以创建一个辅助混合体来取消分组（父级）选择器

//  ––––––––––––––––––––––
//  Ungroup mixin
//  ––––––––––––––––––––––
@mixin ungroup {
    @each $selector in & { 
        @at-root #{$selector}{ @content } 
    } 
}

//  ––––––––––––––––––––––
//  Use example
//  ––––––––––––––––––––––

//  component a
@mixin component-a {
    .component-a {
        &:hover, 
        &:focus-within {
            @include ungroup {
                color: red; 
            }
        } 
    }
}

//  component b
@mixin component-b {
    .component-b {
        &:hover, 
        &:focus-within {
            @include ungroup {
                color: blue; 
            }
        } 
    }
}

//  assemble
@include component-a;
@include component-b;

欢迎提出建议和意见！ :)

此评论线程已关闭。如果您有重要信息要分享，请联系我们。