如何使用CSS更改边栏中选定选项的颜色？

<div class="sidebar">
  <ul>
    <li class="selected">Home</li>
    <li>About</li>
    <li>Contact</li>
  </ul>
</div>

.sidebar .selected {
  color: #FF5733; /* 你想要的颜色 */
}

.sidebar li:hover {
  color: #FF5733; /* 鼠标悬停时的颜色 */
}

.sidebar li:active {
  color: #33FF57; /* 按下时的颜色 */
}

<div class="sidebar">
  <ul>
    <li onclick="selectItem(this)">Home</li>
    <li onclick="selectItem(this)">About</li>
    <li onclick="selectItem(this)">Contact</li>
  </ul>
</div>

<script>
  function selectItem(item) {
    // 移除所有选项的选中状态
    const items = document.querySelectorAll('.sidebar li');
    items.forEach(i => i.classList.remove('selected'));

    // 添加选中状态到当前选项
    item.classList.add('selected');
  }
</script>

.sidebar .selected {
  color: #FF5733; /* 选中时的颜色 */
}

:root {
  --selected-color: #FF5733;
}

.sidebar .selected {
  color: var(--selected-color);
}