CSS：如何更短的代碼有選擇直接孩子與多個ID

Question

我有這樣的：

#cbfr_196 > .my_field {width: 95%;} 

現在我有更多的ID包含，所以我可以做這樣的：

#cbfr_196 > .my_field {width: 95%;} 
#cbfr_197 > .my_field {width: 95%;} 
#cbfr_198 > .my_field {width: 95%;} 

但我想縮短代碼。我做了一些測試，但我不知道該怎麼做。

如果我這樣做：

#cbfr_196, #cbfr_197, #cbfr_198 > .my_field {width: 95%;} 

這項工作只爲ID＃cbfr_198，如果我刪除逗號，沒有什麼工作。

任何線索？

Answer 1

你可以做這樣的事情：

[id^="cbfr"] > .my_field {width: 95%;} 

這says-「針對任何.my_field這是一個元素的ID與cbfr開始的孩子」。

順便說一句，您的單行嘗試不起作用，因爲逗號之間的每個部分都是完整的規則。對於它的工作，它將看起來像這樣：

#cbfr_196 > .my_field, #cbfr_197 > .my_field, #cbfr_198 > .my_field {width: 95%;} 

但是，這並沒有太大的改善，當然。