如何使用CSS选择器选择元素谁的属性可以有多个值

Question

样本条件是

(type = text || type = password || type = search || type = tel)&& readonly!= true && disabled!= true && focused

例如,

1.<input type="text"></input>
2.<input type="password"></input>
3.<input type="search"></input>
4.<input type="text" readonly></input>
5.<input type="password" disabled></input>

仅1,2,3应该选择,4和5未应选择.我已经谷歌搜索,但没有用.有谁能够帮我？

(不使用像jquery这样的任何js库)

Answer 1

您的答案是使用属性选择器以及not选择器和:focus选择器的组合.

这是一个JsFiddle和下面的CSS:http://jsfiddle.net/rgthree/bdb63/

input[type="text"]:not([readonly]):not([disabled]):focus,
input[type="password"]:not([readonly]):not([disabled]):focus,
input[type="search"]:not([readonly]):not([disabled]):focus,
input[type="tel"]:not([readonly]):not([disabled]):focus { /* ... */ }

但是,根据您的表单,您可能会发现在单个规则中更方便地将所有输入设置为非特定类型.就像是:

input:not([type="checkbox"]):not([type="radio"]):not([readonly]):not([disabled]):focus { /* ... */ }