使用 CSS 更改所选项目的颜色答案

【问题标题】：Change the color of selected item using CSS使用 CSS 更改所选项目的颜色
【发布时间】：2015-10-27 22:25:17
【问题描述】：

我有一个物品清单。用户可以通过点击来选择一个项目。我想使用 CSS 更改所选项目的颜色。假设用户点击了 item1，那么 item1 会变成红色。现在如果用户点击第 2 项，则第 2 项将变为红色。我的 HTML 代码：

<ul>
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
</ul>

【问题讨论】：

标签： html css

【解决方案1】：

向每个li 元素添加tabindex 允许您应用:focus 伪类：

li:focus {
  color: red;
  outline: none;
}

<ul>
  <li tabindex=1>item1</li>
  <li tabindex=1>item2</li>
  <li tabindex=1>item3</li>
</ul

【讨论】：

【解决方案2】：

您可以使用 :focus 伪选择器仅使用 CSS 完成此操作：

li:focus{
  color:red;
  outline:none;
}

这要求元素是可聚焦的。添加标签索引可能适合您正在做的事情并且会起作用。

<ul>
  <li tabindex="0">item1</li>
  <li tabindex="0">item2</li>
  <li tabindex="0">item3</li>
</ul>

这是关于哪些元素获得焦点的答案： Which HTML elements can receive focus?

http://jsbin.com/nokiyapejo/edit?html,css,js,output

【讨论】：

【解决方案3】：

你可以把元素变成一个按钮。

删除按钮的默认样式：

online: none;
border: none;
background: none;

然后应用通常的按钮 :focus 或 :active 选择器。

示例如下：

HTML：

<button>test1</button>
<button>test2</button>
<button>test3</button>

CSS：

button{
  width: 100px;
  height: 100px; 
  background: lightgray;
  outline: none;
  border: none;
}

button:hover{
  color: red; 
  cursor: pointer;
}

button:focus, button:active{
  background-color: pink;
  color: white; 
}

这里是代码笔：https://codepen.io/dmitrisan/pen/PomdRBG

记住：您可以通过 CSS 规则将 BUTTON 转换为 div 或 span 标签，但所有 BUTTON 伪选择器仍然适用。

编程是史诗般的！你制定规则！ =)

【讨论】：

您的答案与现有答案有何不同？关于按钮的整个事情对讨论没有任何帮助。