CSS为li元素使用:onclick伪选择器报错的解决方法

CSS 标准里没有:onclick这个伪选择器，你把 HTML 的onclick事件属性和 CSS 交互伪类的规则搞混了，IDE 报非法选择器是符合规范的提示。

根据你想要的触发逻辑，选对应方案即可：

方案1：纯CSS实现「按住点击时生效，松开鼠标恢复默认」 #

直接用 CSS 原生支持的:active交互伪类替换你写的:onclick，这个伪类专门匹配被鼠标/触控点按下的激活元素：

#project-1:active {
    background: gray;
    width: 75px;
    border-radius: 25px;
    animation: roll 3s ease;
}

小提示：建议给#project-1补一个默认样式块，写上初始的宽度、背景、圆角属性，避免样式触发时出现突兀跳变。

方案2：实现「点击松开后样式仍保留」 #

如果需要点击触发后样式不随鼠标松开消失，可按需求选以下两种实现：

• 纯CSS实现（点击页面其他区域时样式会恢复）：给li元素加tabindex属性让它支持聚焦状态，用:focus伪类匹配
  先修改HTML代码：

  <li id="project-1" tabindex="0">1</li>
  

  再修改CSS选择器：

  #project-1:focus {
      background: gray;
      width: 75px;
      border-radius: 25px;
      animation: roll 3s ease;
      /* 不需要浏览器默认聚焦轮廓的话可以加这行 */
      outline: none;
  }
  

• JS实现（支持永久生效/点击切换状态，兼容性最好）：把要触发的样式封装成独立CSS类，点击元素时给它添加/切换这个类即可
  先写封装好的样式类：

  .project-active {
      background: gray;
      width: 75px;
      border-radius: 25px;
      animation: roll 3s ease;
  }
  

  再写绑定点击事件的JS代码：

  const projectItem = document.getElementById('project-1');
  projectItem.addEventListener('click', () => {
    // 需要点击后永久保留样式就用classList.add，需要点击来回切换效果就用toggle
    projectItem.classList.toggle('project-active');
  })
  

内容的提问来源于stack exchange，提问作者Lennox Anderson