如何用CSS或JS选中并影响特定同级元素？新手开发求助

问题根源 #

你的<a>标签都嵌套在<li>内，彼此并非直接同级元素——相邻的是<li>而非<a>，这是你之前CSS选择器失效的核心原因。

方案一：纯CSS实现（仅影响右侧相邻链接） #

利用CSS兄弟选择器，针对<li>的hover状态控制内部<a>及右侧相邻<li>内的<a>：

/* 若未全局定义变量，可在这里补充 */
:root {
  --font: #333; /* 替换为你的实际字体颜色值 */
}

/* 链接基础样式 */
ul li a {
  color: var(--font);
  font-size: 100%;
  opacity: 0.7;
  transition: color 0.5s, font-size 0.5s, opacity 0.5s;
  display: block; /* 让链接占满li区域，提升hover触发范围 */
  padding: 8px 0; /* 可选，增加点击交互区域 */
}

/* 悬停时当前链接放大 */
ul li:hover a {
  font-size: 150%;
  opacity: 1;
}

/* 悬停时右侧相邻链接放大 */
ul li:hover + li a {
  font-size: 125%;
}

/* 非悬停状态链接恢复原样式 */
ul li:not(:hover) a {
  font-size: 100%;
  opacity: 0.7;
}

说明：CSS没有前向兄弟选择器，因此纯CSS无法直接选中当前<li>左侧的相邻元素，若需要同时影响左右两侧相邻链接，建议使用下面的JS方案。

方案二：JavaScript实现（同时影响左右相邻链接） #

通过监听鼠标事件，动态给相邻<li>添加/移除样式类，无需手动给每个链接加类：

<ul class="link-list">
  <li><a href="">Tema 2</a></li>
  <li><a href="">Tema 3</a></li>
  <li><a href="">Tema 4</a></li>
  <li><a href="">Tema 5</a></li>
  <li><a href="">Tema 6</a></li>
</ul>

<style>
:root {
  --font: #333;
}

.link-list li a {
  color: var(--font);
  font-size: 100%;
  opacity: 0.7;
  transition: all 0.5s ease;
  display: block;
  padding: 8px 0;
}

/* 当前悬停链接的放大样式 */
.link-list li.active a {
  font-size: 150%;
  opacity: 1;
}

/* 相邻链接的放大样式 */
.link-list li.neighbor a {
  font-size: 125%;
  opacity: 0.9;
}
</style>

<script>
const linkList = document.querySelector('.link-list');
const listItems = linkList.querySelectorAll('li');

listItems.forEach(item => {
  // 鼠标进入时添加样式类
  item.addEventListener('mouseenter', () => {
    item.classList.add('active');
    // 处理左侧相邻元素
    const prevSibling = item.previousElementSibling;
    if (prevSibling) prevSibling.classList.add('neighbor');
    // 处理右侧相邻元素
    const nextSibling = item.nextElementSibling;
    if (nextSibling) nextSibling.classList.add('neighbor');
  });

  // 鼠标离开时移除样式类
  item.addEventListener('mouseleave', () => {
    item.classList.remove('active');
    const prevSibling = item.previousElementSibling;
    if (prevSibling) prevSibling.classList.remove('neighbor');
    const nextSibling = item.nextElementSibling;
    if (nextSibling) nextSibling.classList.remove('neighbor');
  });
});
</script>

优势：自动识别左右相邻元素，逻辑灵活，无需手动维护每个链接的类名，完全符合你不想逐个设置的需求。

额外提示 #

• 用transition: all 0.5s ease可简化过渡属性写法（若所有属性都需要过渡）。
• 若列表是横向导航栏，需给<li>设置display: inline-block或flex实现横向布局。

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