Question

示例：

HTML

<a href="#" id="one"></a><br>
<a href="#" id="two"></a><br>
<a href="#" id="three"></a><br>
<a href="#" id="four"></a><br>
<a href="#" id="five"></a><br>
.
.
.
<a href="#" id="amillion"></a><br>

如果我希望在#four链接之前显示css链接（使用适当的#three），我通常也希望通过{{{}之前的标签选择它1}}链接。为了实现这一点，我需要为#three设置整个链接（以及其他所有标记），以便按标签顺序选择tabindex和#four。这没关系，但如果我必须为某些#three链接设置tabindex该怎么办？

这是什么解决方案？我无法在任何地方找到它......或者也许还有其他方法可以做到这一点？

Answer 1

你可以这样做

.wrap {
  display: flex;
  flex-direction: column;
}

.wrap a {
  order: 4
}

.wrap a:nth-child(-n+4) {
  order: 1
}
.wrap a:nth-child(3) {
  order: 2
}
.wrap a:nth-child(4) {
  order: 3
}

<div class="wrap">
<a href="#" id="one">1</a>
<a href="#" id="two">2</a>
<a href="#" id="four">4</a>
<a href="#" id="three">3</a>
<a href="#" id="five">5</a>
<a href="#" id="ten">10</a>
<a href="#" id="hundred">100</a>
<a href="#" id="thousand">1000</a>
<a href="#" id="tenthousand">10000</a>
<a href="#" id="hundredthousand">100000</a>
<a href="#" id="onemillion">1000000</a>
</div>

2：nd样本，移动10/100

.wrap {
  display: flex;
  flex-direction: column;
}

.wrap a {
  order: 4
}

.wrap a:nth-child(-n+7) {
  order: 1
}
.wrap a:nth-child(6) {
  order: 2
}
.wrap a:nth-child(7) {
  order: 3
}

<div class="wrap">
<a href="#" id="one">1</a>
<a href="#" id="two">2</a>
<a href="#" id="three">3</a>
<a href="#" id="four">4</a>
<a href="#" id="five">5</a>
<a href="#" id="hundred">100</a>
<a href="#" id="ten">10</a>
<a href="#" id="thousand">1000</a>
<a href="#" id="tenthousand">10000</a>
<a href="#" id="hundredthousand">100000</a>
<a href="#" id="onemillion">1000000</a>
</div>

tabindex命令没有效率？

1 个答案: