Having trouble class

I'm new to the CSS and I think I'm asking a dumb question, in the CSS

I wrote this first=

input.text, input[type="text"], i开发者_StackOverflownput.password, input[type="password"], textarea, select { border: 1px solid black; }

and this I wrote afterwards=

.HTMLWidget-2 input.text, input[type="text"], input.password, input[type="password"], textarea, select .subscribeInput { background-color: grey; }

and everything came out like the second one. Thanks.

What you wrote is basically equivalent to:

select { border: 1px solid black; }

.HTMLWidget-2 input.text, 
select .subscribeInput { background-color: grey; }

input[type="text"], 
input.password, 
input[type="password"], 
textarea{
    border: 1px solid black;
    background-color: grey
}

If you want only inputs in .HTMLWidget-2 to have the background it needs to be in every selector, ex:

input.text, 
input[type="text"], 
input.password, 
input[type="password"], 
textarea, 
select {
    border: 1px solid black;
}

.HTMLWidget-2 input.text, 
.HTMLWidget-2 input[type="text"], 
.HTMLWidget-2 input.password, 
.HTMLWidget-2 input[type="password"], 
.HTMLWidget-2 textarea, 
.HTMLWidget-2 select {
    background-color: grey;
}

Though as I recall...IE7 (I think) and IE6 won't change the default select border.

This is because you are giving more importance to your selector.

.HTMLWidget-2 input.text

is more specific than

input.text 

I recommend you have a look at the W3 specification http://www.w3.org/TR/CSS21/cascade.html#specificity