CSS doesnt override default values | CSS specifity | CSS inheritc

Question

in my custom project to learn some Webdev with Flask im creating my site from ground up. I ran over this issue several times now and didn't find a satisfying solution. So when I'm creating CSS to override my browser default values, they sometimes don't apply.

E.g. I don't have any styles for buttons yet and I'm trying to create a login button.

When i use the default CSS selector:

button {}

the CSS applies. But if i use something like:

button.lg-button #lg1-button{}

it doesn't apply. This confuses me because i was taught that the more specific selectors apply.

Example Code

/*Doesnt work*/
!important
button.lg-button {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;

}
/*Doesnt work*/

button.lg-button #lg-button1{
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;

}

/*Works*/

button {
    background-color: #04AA6D;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    cursor: pointer;
    width: 100%;

}