CSSコンマの使用

Question

以下はいくつかのCSSコードです。

.form-field {min-height: 20px; margin-bottom: 10px; padding-top: 4px; width: 80px;} 
.form-field TEXTAREA, INPUT[type='text'] {position: absolute; left: 100px; top: 0px; height: 15px;} 
.form-field TEXTAREA {height: 80px;} 

だからたびにCSSが適用されるべきdiv.form-fieldでinputまたはtextareaあります。

INPUT[type='text']（でも.form-fieldの外）どこでも、CSSが適用されます。それをやめないようにするにはどうすればいいですか？

Answer 1

.form-field TEXTAREA, .form-field INPUT[type='text']{ 

Answer 2

これを無視してください。

+ "兄弟要素Eの直前にある任意のF要素に一致します。 出典：W3

.form-field TEXTAREA + INPUT[type='text'] {position: absolute; left: 100px; top: 0px; height: 15px;} 

Answer 3

コンマ全体セレクタを分離します。したがって.form-field TEXTAREA, INPUT[type='text']は.form-field TEXTAREAとINPUT[type='text']を選択します。

興味があるのは:matches() selectorです。現在のところ、これはFireFoxの:-moz-any() selectorとしてのみ利用可能です。それはあなたが書くことができます：

.form-field:-moz-any(TEXTAREA, INPUT[type='text']) 

しかし、それだけでサイドノートとして

.form-field TEXTAREA, .form-field INPUT[type='text'] 

---

で行く方が安全だ、HTMLタグ名は小文字でなければなりません。だから実際に使用する必要があります

.form-field textarea, .form-field input[type='text']