小屏幕下媒体查询内CSS类不生效 无法切换hover交互样式求助

核心问题排查 #

以下是导致媒体查询规则不生效的几个关键原因：

• CSS语法错误：媒体查询内.link-ranking::before、.link-ranking::after的过渡属性写为transition: width .0.7s cubic-bezier(0.25, 1, 0.5, 1)，多输入了一个小数点，属于非法属性值，直接导致整条样式规则失效
• 原有样式未重置：桌面端给.link-ranking::before、.link-ranking::after定义的边框、transform属性在小屏幕下没有清除，和媒体查询内的下划线样式冲突
• 交互规则错误：小屏幕下的hover规则设置了无效的background-size属性，没有给伪元素设置width: 100%来触发下划线展开效果，同时保留了两个重叠的伪元素做同一样式，属于冗余代码
• 激活态样式冲突：小屏幕下的.link-ranking-active没有清除桌面端定义的边框属性，导致选中状态仍然显示边框而非预期的下划线效果
• 基础语法错误：桌面端.link-ranking-active的padding属性值为空，仅写了padding: px;，属于非法语法，会影响后续样式解析

修正后完整代码 #

CSS代码 #

.link-ranking {
  box-sizing: border-box;
  position: relative;
  padding: 8px;
  color: #ffffff;
  text-decoration: none;
}

.link-ranking::before,
.link-ranking::after {
  content: '';
  box-sizing: border-box;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  transform-origin: center;
}

.link-ranking::before {
  border-top: 0.15em solid #48ffd5;
  border-bottom: 0.15em solid #48ffd5;
  border-radius: 0.3em;
  transform: scale3d(0, 1, 1);
}

.link-ranking::after {
  border-left: 0.15em solid #48ffd5;
  border-right: 0.15em solid #48ffd5;
  border-radius: 0.3em;
  transform: scale3d(1, 0, 1);
}

.link-ranking:hover::before,
.link-ranking:hover::after {
  transform: scale3d(1, 1, 1);
  transition: transform 700ms;
}

.link-ranking-active {
  box-sizing: border-box;
  position: relative;
  padding: 8px;
  height: 100%;
  width: 100%;
  border-radius: 0.3em;
  border: 0.15em solid #48ffd5;
}

@media screen and (max-width: 1454px) {
  .link-ranking {
    position: relative;
    padding: 0.3em;
    padding-bottom: 2px;
    color: #ffffff;
    text-decoration: none;
  }
  /* 清除原有伪元素的边框、transform等冗余属性 */
  .link-ranking::before,
  .link-ranking::after {
    all: unset;
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #48ffd5;
    transition: width 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  }
  .link-ranking:hover::before,
  .link-ranking:hover::after {
    width: 100%;
  }
  /* 清除原有激活态的边框属性 */
  .link-ranking-active {
    border: none;
    color: #48ffd5;
    background: linear-gradient(to bottom, #48ffd5 0%, #48ffd5 98%);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: left 100%;
  }
}

JS代码（无需修改） #

document.querySelectorAll('a.link-ranking').forEach((aLink, _, arr) => {
  aLink.onclick = () => {
    arr.forEach(a => a.classList.toggle('link-ranking-active', aLink === a))
  }
})

HTML代码（无需修改） #

<div class="ranking" id="ranking">
  <ul class="ul-menu">
    <li class="li-result"><a class="link-ranking" id="Form">Survey Results</a></li>
    <li class="li-result"><a class="link-ranking" id="Comparison">Table of Comparison</a></li>
  </ul>
</div>

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