在锚点内使用标题时未应用大纲样式

Question

在锚点“outline-style”内使用标题时未应用。我为 parent 锚标记的 focus-visible 添加了 outline: 4px dashed darkorange;。

它适用于自动样式 outline: 4px auto darkorange;，但对于 实线、虚线、点线等其他样式 它不起作用

如果我遗漏了什么或者我们对此问题有任何解决方法，请告诉我

<a class="focus-visible-only" href="#">Sample Link <a>
  
<h1 class="focus-visible-only"> Sample Heading </h1>
  
<a class="focus-visible-only" href="#">
  <h1> Heading inside Link </h1>
</a>

<a class="focus-visible-only" href="#">
  <span> span inside Link <span>
</a>

.focus-visible-only:focus-visible {
  outline: 4px dotted darkorange;
}

codepen link: https://codepen.io/vivid888/pen/xxYjNJx

Answer 1

由于 <h1> 本身不是交互式元素，您无法使用 Tab 键切换到它。要使其可制表，请应用 tabindex="0".

要使嵌套的<h1>-属性采用focus样式，需要使用a.focus-visible-only:focus-visible触发焦点，然后使用选择器<h1> 应用样式。

我不知道为什么 <h1> Heading inside Link </h1>-元素的行为如此奇怪 - 它环绕着

<a class="focus-visible-only" href="#">
  <span> span inside Link <span>
</a>

元素出于某种原因。您可以只在容器 <a> 元素上应用 display: block 来更改它。

此外，如果您不想 link 占满整个宽度，您可以使用 max-width: fit-content。

.focus-visible-only:focus-visible {
  outline: 2px dotted darkorange;
}

a.focus-visible-only:focus-visible h1 {
  outline: 2px dotted darkorange;
}

a:last-of-type {
  display: block;
}

a,
h1,
span {
  max-width: fit-content;
}

<a class="focus-visible-only" href="#">Sample Link <a>
  
<h1 class="focus-visible-only" tabindex="0"> Sample Heading </h1>
  
<a class="focus-visible-only" href="#">
  <h1>Heading inside Link </h1>
</a>

<a class="focus-visible-only" href="#">
  <span>span inside Link </span>
</a>

在锚点内使用标题时未应用大纲样式

Outline style is not getting applied when heading is used inside anchor

html

css