CSS: Multiple Attribute Selectors

2019-04-18 07:50发布

问题:

I would like to style form inputs of type "email" and "password", but not anything else. I was imagining something like the following:

input[type="email"][type="password"] {
    ....
}

However, the way attribute selectors work, it appears to interpret this as "input where the type is simultaneously both 'email' and 'password'". What I'm going for is "input where the type is either exactly 'email' or 'password'". Of course, nothing is both of type email and of type password at the same time.

Is it possible to write a CSS rule that or's across multiple different attribute selectors?

For reference, the HTML would look something like:

<form id="login" onsubmit="return fadeaway()">
    <fieldset>
    <input type="email" placeholder="username"/> <br />
    <input type="password" placeholder="password"/> <br />
    </fieldset>
</form>

回答1:

Just do this:

input[type="email"], input[type="password"]


回答2:

use a comma :

input[type="email"],input[type="password"] {
    ....
}

w3 docs on group selectors here