css li tabindex

`tabindex` 属性用于定义 HTML 元素的 tab 键顺序，它可以应用到所有 HTML 元素上，包括 `li` 元素和 CSS 中的伪元素。

通常情况下，当用户按下 tab 键时，浏览器会按照 HTML 文档中元素的排列顺序依次聚焦到每个元素上。但是有时候我们需要改变元素的聚焦顺序，这时就可以使用 `tabindex` 属性来定义元素的聚焦顺序。`tabindex` 属性的值可以为正整数、0 或负整数：

- 值为正整数：表示该元素会按照指定的顺序聚焦。值越小，聚焦顺序越靠前。
- 值为 0：表示该元素会按照默认的顺序聚焦。
- 值为负整数：表示该元素不会被聚焦，除非用户使用鼠标点击该元素。

示例：

<!-- 依次按照 2、1、3 的顺序聚焦 -->
<ul>
  <li tabindex="2">Second item</li>
  <li tabindex="1">First item</li>
  <li tabindex="3">Third item</li>
</ul>

相关问题

CSS如何实现鼠标点击li显示被选中并保持选中状态

你可以使用CSS中的`:active`伪类和`:focus`伪类来实现鼠标点击li元素时被选中并保持选中状态。

首先，使用`:active`伪类来定义当点击li元素时应用的样式，例如：

li:active {
  background-color: #ccc;
}

这将使li元素在被点击时具有灰色背景色。

然后，使用`:focus`伪类来定义当li元素获得焦点时应用的样式，例如：

li:focus {
  outline: none;
  background-color: #ccc;
}

这将使li元素在获得焦点时具有灰色背景色，并且删除默认的蓝色边框。

请注意，`:focus`伪类只适用于可获取焦点的元素，如a、input等。如果要使li元素可获取焦点，请为其添加tabindex属性，例如：

<li tabindex="0">列表项</li>

这样，用户就可以使用键盘导航到li元素并将其选中。

最后，为了保持选中状态，您可以使用JavaScript在li元素被点击时添加一个类，例如：

li.selected {
  background-color: #ccc;
}

然后，您可以在JavaScript中使用以下代码来添加和删除该类：

// 获取所有li元素
const lis = document.querySelectorAll('li');

// 为每个li元素添加点击事件监听器
lis.forEach(li => {
  li.addEventListener('click', () => {
    // 删除所有li元素的selected类
    lis.forEach(li => {
      li.classList.remove('selected');
    });
    // 为被点击的li元素添加selected类
    li.classList.add('selected');
  });
});

这样，当用户点击li元素时，它将获得selected类，并保持选中状态，直到用户单击其他li元素。

css聚焦一级菜单后一直选中二级菜单

您可以使用CSS伪类选择器来实现这个效果。当一级菜单被聚焦时，您可以将其后面的二级菜单设置为可见，并使用:focus-within伪类选择器来保持二级菜单的可见状态。以下是一个示例CSS代码：

/* 隐藏所有二级菜单 */
ul ul {
  display: none;
}

/* 当一级菜单被聚焦时，显示其后面的二级菜单 */
li:focus-within > ul {
  display: block;
}

在HTML中，您需要使用tabindex属性来使一级菜单能够聚焦。例如：

<ul>
  <li tabindex="0">一级菜单
    <ul>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
  <li tabindex="0">一级菜单
    <ul>
      <li>二级菜单</li>
      <li>二级菜单</li>
    </ul>
  </li>
</ul>

这将使每个一级菜单能够被聚焦，并且当聚焦时，其后面的二级菜单将保持可见状态。