GTK4 CSS中:hover样式误应用于按钮标签而非按钮本身的问题咨询

你好呀～这个问题其实是CSS选择器的一个小细节没注意到导致的，我之前调GTK样式的时候也踩过这个坑！

你看你写的CSS里，headerbar button :hover这一行里，button和:hover之间多了一个空格。在CSS语法里，这个空格代表后代选择器，意思是“选中headerbar下button元素里所有处于hover状态的子元素”——而GTK的按钮组件内部默认是包含标签子元素的，所以你的hover样式就被错误地应用到按钮的标签上，而不是按钮本身了，这就是为啥会出现你看到的那种情况。

解决方法很简单，只要把button和:hover之间的空格去掉就行，写成headerbar button:hover，这样这个选择器就会精准选中“headerbar下处于hover状态的button元素本身”，你的样式就能正确生效啦。

修正后的完整CSS代码如下：

headerbar button {
  border-radius: 20px;
  border-style: none;
  border: solid 1px red;
  background-color: transparent;
  color: skyblue;
}

headerbar button:hover {
  border: solid 1px lightgreen;
  color: magenta;
}

顺便提个小小贴士：如果之后你需要给按钮内部的子元素（比如标签）单独设置hover样式，再用带空格的headerbar button :hover写法就可以啦，这次是需求不同所以要区分开～

内容来源于stack exchange