如何为后接同属性值的元素设置样式？CSS/JS方案均可

纯CSS方案说明 #

纯CSS目前无法完全满足你的需求，核心限制有两点：

• CSS属性选择器必须指定固定属性值，无法动态判断两个相邻元素的myattr属性是否相等，因此无法适配任意未知的属性取值。
• CSS没有前向兄弟选择器，只能选中后一个相邻元素，无法直接选中「后续相邻元素属性和自身相同」的前一个元素。

如果你的场景中myattr的所有可能取值是可提前枚举的，并且可以接受给后一个同属性元素设置样式，可以用相邻兄弟选择器实现，以Sass预处理器为例可以简化代码：

// 枚举所有可能的myattr取值
@each $attrVal in user1, user2, user3 {
  div[myattr="#{$attrVal}"] + div[myattr="#{$attrVal}"] {
    /* 自定义样式 */
    color: red;
  }
}

通用JavaScript方案 #

如果需要适配任意myattr取值，且要选中你需求里的前一个符合条件的元素，用JS实现最简单：
首先可以提前写好自定义样式类（推荐，样式和逻辑分离）：

.target-element {
  /* 示例样式，可替换为你需要的样式 */
  display: none;
}

然后添加JS逻辑匹配元素：

// 遍历所有带myattr属性的div
document.querySelectorAll('div[myattr]').forEach(el => {
  const nextSibling = el.nextElementSibling;
  // 校验下一个元素存在且属性值相同
  if (nextSibling && nextSibling.getAttribute('myattr') === el.getAttribute('myattr')) {
    el.classList.add('target-element');
  }
})

针对你给出的HTML结构，这段代码会正确选中内容为1234的第二个myattr=user2的div，完全符合需求。

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