Html 如果两个元素之间的数据属性相同，如何制作CSS选择器？

当我将鼠标悬停在.slot上方时，我试图对.chip同级元素应用“缩小”（.DOM中的.chip元素不是.slot的子元素，因为它们从.slot移动到.slot，我没有实现将.chip从旧的.slot子元素中移除并附加到.new slot子元素；我只是更新.chip元素的

数据slot

属性）

因此，我有以下CSS规则：

#board.start_move > .slot.movable[data-slot="1"]:hover ~ .chip.top[data-slot="1"],
#board.start_move > .slot.movable[data-slot="2"]:hover ~ .chip.top[data-slot="2"],
#board.start_move > .slot.movable[data-slot="3"]:hover ~ .chip.top[data-slot="3"],
#board.start_move > .slot.movable[data-slot="4"]:hover ~ .chip.top[data-slot="4"],
#board.start_move > .slot.movable[data-slot="5"]:hover ~ .chip.top[data-slot="5"],
#board.start_move > .slot.movable[data-slot="6"]:hover ~ .chip.top[data-slot="6"],
#board.start_move > .slot.movable[data-slot="7"]:hover ~ .chip.top[data-slot="7"],
#board.start_move > .slot.movable[data-slot="8"]:hover ~ .chip.top[data-slot="8"],
#board.start_move > .slot.movable[data-slot="9"]:hover ~ .chip.top[data-slot="9"],
#board.start_move > .slot.movable[data-slot="10"]:hover ~ .chip.top[data-slot="10"],
#board.start_move > .slot.movable[data-slot="11"]:hover ~ .chip.top[data-slot="11"],
#board.start_move > .slot.movable[data-slot="12"]:hover ~ .chip.top[data-slot="12"],
#board.start_move > .slot.movable[data-slot="13"]:hover ~ .chip.top[data-slot="13"],
#board.start_move > .slot.movable[data-slot="14"]:hover ~ .chip.top[data-slot="14"],
#board.start_move > .slot.movable[data-slot="15"]:hover ~ .chip.top[data-slot="15"],
#board.start_move > .slot.movable[data-slot="16"]:hover ~ .chip.top[data-slot="16"],
#board.start_move > .slot.movable[data-slot="17"]:hover ~ .chip.top[data-slot="17"],
#board.start_move > .slot.movable[data-slot="18"]:hover ~ .chip.top[data-slot="18"],
#board.start_move > .slot.movable[data-slot="19"]:hover ~ .chip.top[data-slot="19"],
#board.start_move > .slot.movable[data-slot="20"]:hover ~ .chip.top[data-slot="20"],
#board.start_move > .slot.movable[data-slot="21"]:hover ~ .chip.top[data-slot="21"],
#board.start_move > .slot.movable[data-slot="22"]:hover ~ .chip.top[data-slot="22"],
#board.start_move > .slot.movable[data-slot="23"]:hover ~ .chip.top[data-slot="23"],
#board.start_move > .slot.movable[data-slot="24"]:hover ~ .chip.top[data-slot="24"],
#board.start_move > .slot.movable.selected[data-slot="1"] ~ .chip.top[data-slot="1"],
#board.start_move > .slot.movable.selected[data-slot="2"] ~ .chip.top[data-slot="2"],
#board.start_move > .slot.movable.selected[data-slot="3"] ~ .chip.top[data-slot="3"],
#board.start_move > .slot.movable.selected[data-slot="4"] ~ .chip.top[data-slot="4"],
#board.start_move > .slot.movable.selected[data-slot="5"] ~ .chip.top[data-slot="5"],
#board.start_move > .slot.movable.selected[data-slot="6"] ~ .chip.top[data-slot="6"],
#board.start_move > .slot.movable.selected[data-slot="7"] ~ .chip.top[data-slot="7"],
#board.start_move > .slot.movable.selected[data-slot="8"] ~ .chip.top[data-slot="8"],
#board.start_move > .slot.movable.selected[data-slot="9"] ~ .chip.top[data-slot="9"],
#board.start_move > .slot.movable.selected[data-slot="10"] ~ .chip.top[data-slot="10"],
#board.start_move > .slot.movable.selected[data-slot="11"] ~ .chip.top[data-slot="11"],
#board.start_move > .slot.movable.selected[data-slot="12"] ~ .chip.top[data-slot="12"],
#board.start_move > .slot.movable.selected[data-slot="13"] ~ .chip.top[data-slot="13"],
#board.start_move > .slot.movable.selected[data-slot="14"] ~ .chip.top[data-slot="14"],
#board.start_move > .slot.movable.selected[data-slot="15"] ~ .chip.top[data-slot="15"],
#board.start_move > .slot.movable.selected[data-slot="16"] ~ .chip.top[data-slot="16"],
#board.start_move > .slot.movable.selected[data-slot="17"] ~ .chip.top[data-slot="17"],
#board.start_move > .slot.movable.selected[data-slot="18"] ~ .chip.top[data-slot="18"],
#board.start_move > .slot.movable.selected[data-slot="19"] ~ .chip.top[data-slot="19"],
#board.start_move > .slot.movable.selected[data-slot="20"] ~ .chip.top[data-slot="20"],
#board.start_move > .slot.movable.selected[data-slot="21"] ~ .chip.top[data-slot="21"],
#board.start_move > .slot.movable.selected[data-slot="22"] ~ .chip.top[data-slot="22"],
#board.start_move > .slot.movable.selected[data-slot="23"] ~ .chip.top[data-slot="23"],
#board.start_move > .slot.movable.selected[data-slot="24"] ~ .chip.top[data-slot="24"] {
    transform-origin: center;
    transform: scale(1.3);
}

因为我只想缩小与：hovered.slot关联的.top.chip

以上内容按原样运行。我们可以讨论实现我所做工作的其他方法，但问题是：

通过指定两个元素中的

数据槽

属性相同，可以将上述48个选择器简化为2个吗

更新2 根据请求，在JSFIDLE中添加一个

---

作为旁注：插槽从右上角逆时针编号，其中是插槽1（插槽24位于右下角）；您可以使用JSFIDLE提供的控制台输入命令，如

tvl.move（1,5）

，将芯片从一个插槽移动到另一个插槽。

，因为您无法使用单个CSS选择器规则（因为没有“相同属性值”选择器）-我建议使用预处理器（SASS/SCSS/LESS）来管理选择器的实际写入

您可以使用提供的

@for

循环来循环您需要的任意次数的迭代

@for $i from 1 to 50 {
  #board.start_move {
     > .slot.movable[data-slot="#{$i}"]:hover,
        .slot.movable.selected[data-slot="#{$i}"]:hover {
        ~ .chip.top[data-slot="#{$i}"] {
          transform-origin: center;
          transform: scale(1.3);
        }
     }
  }
}

---

这可以使解决方案与“CSS解决方案”保持最接近，而无需更改JS或当前代码的编写方式。

我们可以看到HTML吗？我认为这行不通：您的问题的答案是：如果使用预处理器（SASS/SCSS/LESS），则什么都不说，您可以使用

@进行
循环，而不必担心写出来。
@从1美元到50美元{board.start_move{>.slot.movable[data slot=“{$i}]：hover，.slot.movable.selected[data slot=“{$i}]：hover{.chip.top[data slot=“{$i}]”转换原点：中心；转换：缩放（1.3）}}
如果你共享HTML，你会得到更好的答案。我们可以像你做不到的那样回答你的问题，但你可以尝试……这会更有趣，你可能会对实现你想要的不同更好的方法感到惊讶。