我一直在玩HTML和CSS来创建一个简单的2人桌面游戏而不使用任何Javascript.我使用标签,单选按钮和复选框来创建不同的状态并模仿某些逻辑,以便该部件可以在电路板上移动.

它工作"很好",虽然可用性不是很好.例如,在点击骰子后,磁贴移动,我显示一个按钮以切换到下一个玩家(再次使用标签和复选框控制)...这不是很好,如果它改变了玩家会更好"自动".

问题是只能针对一个元素,我不知道如何只需点击一下就能触发两个"动作"(或副作用).

以下代码是一个MCVE以更好地可视化的问题:有两个玩家(轮流指定的)中,用三个片(由6单选按钮:1个代表的每播放机和瓦)的基板,和两个按钮来改变播放机转(只一个可见).如果您点击转弯按钮,转牌将转到下一位玩家.(这里可以找到更复杂的例子)

问题是用户被迫按下按钮来改变转弯,否则同一个玩家将始终处于活动状态.有没有办法让点击标签时,不仅要激活图块,还要更改转弯？或者在没有的情况下,是否有其他方法可以实现这一目标？(不使用JS)

#p1:checked ~ [for=p1],
#p1:checked ~ [for^=tile-p2],
#p1:checked ~ [name^=tile-p2],
#p2:checked ~ [for=p2],
#p2:checked ~ [for^=tile-p1],
#p2:checked ~ [name^=tile-p1]
{ 
  display: none; 
}

/* more rules to hide/show more elements */

Players:
 P1
 P2

Board: 
Player 1:

P1 to 1

P1 to 2

P1 to 3


Player 2:

P2 to 1

P2 to 2

P2 to 3

Change of turn:
Change to Player 2
Change to Player 1

#test:target {
  color: red;
}

#cb:checked

a, label {
  display: block;
  text-decoration: underline;
  color: blue;
}

TEST

Highlight test
Check the box

  Highlight test AND check the box

div {
  color: purple;
}

#radio1:checked ~ div {
  color: blue;
}

#radio2:checked ~ div {
  color: fuchsia;
}

#radio1:invalid ~ div {
  color: red;
}

#radio1:invalid + #radio2:checked ~ div {
  color: green;
}

Text to be green if radio2 is checked

label:focus + #test {
 color: red;
}

label {
  display: block;
  text-decoration: underline;
  color: blue;
}

Check the box and highlight the text
TEST