CSS標籤分配

Question

我使用這個CSS

.options input[type="radio"],input[type="checkbox"],label{ vertical-align: middle; }

但vertical-align屬性被分配給所有的複選框網站不只是那些在「選項」類。

Answer 1

CSS規則，都沒有關係的對方，只是很短的手，一致的方式，將相同的樣式不同的規則。您的例子可以寫成：

.options input[type="radio"] 
{ 
    vertical-align: middle; 
} 
input[type="checkbox"] 
{ 
    vertical-align: middle; 
} 
label 
{ 
    vertical-align: middle; 
} 

因此第二&第三規則將應用這些樣式的所有輸入複選框和標籤。爲了讓你以後，你的規則應該被改寫成結果：

.options input[type="radio"] 
{ 
    vertical-align: middle; 
} 
.options input[type="checkbox"] 
{ 
    vertical-align: middle; 
} 
.options label 
{ 
    vertical-align: middle; 
} 

然後這個簡寫爲：

.options input[type="radio"], 
.options input[type="checkbox"], 
.options label 
{ 
    vertical-align: middle; 
} 

此外，它的值得一提的，是最好的做法是把每條規則&風格獨立線。如果您稍後要使用它，這將使版本控制變得更加容易。

Answer 2

您需要inlcude爲每套例如爲：

.options input[type="radio"], .options input[type="checkbox"], .options label{ vertical-align: middle; } 

當您使用逗號，它本質上作爲一個「OR」語句可供選項。每個逗號分隔的規則都是單獨考慮的。上面的代碼是一樣的寫作：這是逗號分隔

.options input[type="radio"] { vertical-align: middle; } 
.options input[type="checkbox"] { vertical-align: middle; } 
.options label{ vertical-align: middle; }