代码之家 › 专栏 › 技术社区 › tzot

如何制作一个CSS选择器,使两个元素之间的数据属性相同?

css-selectors css html

tzot · 技术社区 · 4 年前

当我将鼠标悬停在.slots上方时,我试图对.chip兄弟元素应用缩小(DOM中的.chip元素不是.slots的子元素,因为它们从.slots移动到.slots,而且我没有将移动.chip实现为将其从旧的.slots子元素中删除并将其附加到.new子元素中;我只是更新 data-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);
}

因为我只想缩小与:悬停的.插槽关联的.top.芯片。

以上内容按原样运行 。我们可以讨论实现我所做工作的替代方法,但问题是:

我可以将上述48个选择器简化为2个吗 数据槽 两个元素的属性是否相同?

更新2

根据要求,a working sample 在JSFiddle。
作为旁注:插槽从右上角逆时针编号,其中是插槽1(插槽24在右下角);您可以使用JSFiddle提供的控制台输入以下命令 tvl.move(1,5) 将芯片从一个插槽移动到另一个插槽。

0 回复 | 直到 4 年前

disinfor 4 年前

由于你无法使用单个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);
        }
     }
  }
}

https://www.sassmeister.com/gist/3b0c9ed2cfda0d668d91666aafdebfed

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