What are the rules for ordering pseudo-states?

Esor

I was surprised to find that the two snippets below gave different results, I thought order shouldn't matter, does it? I can't find docs on the order rules or understand why the second snippet is wrong, all I did was move :horizontal to be the first pseudo-state instead of second.

QScrollBar:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    height: 15px;
    margin: 0px 20px 0 20px;
}
QScrollBar::handle:horizontal {
    background: white;
    min-width: 20px;
}
QScrollBar::add-line:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

QScrollBar::sub-line:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}

QScrollBar:horizontal {
    border: 2px solid grey;
    background: #32CC99;
    height: 15px;
    margin: 0px 20px 0 20px;
}
QScrollBar:horizontal::handle {
    background: white;
    min-width: 20px;
}
QScrollBar:horizontal::add-line {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    subcontrol-position: right;
    subcontrol-origin: margin;
}

QScrollBar:horizontal::sub-line {
    border: 2px solid grey;
    background: #32CC99;
    width: 20px;
    subcontrol-position: left;
    subcontrol-origin: margin;
}

Bonnie

This is a sub-control: ::handle.
This is a pseudo-state: :horizontal.

According to the documentation

Pseudo-states appear at the end of the selector