Avalonia UI use Button.myclass:pointerover to override Button:pointerover

I managed to override properties of a button class using styles:

<Style Selector="Button.icononly">
  <Setter Property="Background" Value="Yellow"/>
</Style>
<Style Selector="Button">
  <Setter Property="Background" Value="Green"/>
</Style>

<Button Classes="icononly"/> 
<Button />

Both show their correct colors.

Now, the part that doesn't work:

<Style Selector="Button.icononly:pointerover /template/ ContentPresenter">
  <Setter Property="Background" Value="Blue"/>
</Style>
<Style Selector="Button:pointerover /template/ ContentPresenter">
  <Setter Property="Background" Value="Red"/>
</Style>

Both buttons are red on hover. But, I expect that icononly button should be blue in :pointerover state. This only works if I don't override the :pointerover of all the buttons (leave out the last 3 lines).

I don't understand how overriding the regular state isn't a problem, it prefers the specific class over none defined, as I would expect. For :pointerover it prefers the other one.

Solution

Referring to Style Priority in docs

Position of the style in the located styles collection - 'latest' has priority.

the order of style is a matter, so always generic styles should come first and then the more specific styles come after

Here is what you want to do.

<StackPanel>
  <StackPanel.Styles>
    <Style Selector="Button">
      <Setter Property="Background" Value="Green"/>
    </Style>
    <Style Selector="Button.icononly">
      <Setter Property="Background" Value="Yellow"/>
    </Style>      
    <Style Selector="Button:pointerover /template/ ContentPresenter">
      <Setter Property="Background" Value="Red"/>
    </Style>      
    <Style Selector="Button.icononly:pointerover /template/ ContentPresenter">
      <Setter Property="Background" Value="Blue"/>
    </Style>      
  </StackPanel.Styles>

  <Button Classes="icononly" Content="icon only" />
  <Button  Content="normal button" />
</StackPanel>