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%;}

那说 - “定位任何.my_field，它是ID以cbfr开头的元素的子元素”。

顺便说一句，你的单行尝试不起作用，因为逗号之间的每个部分都是完整的规则。要使它工作，它必须看起来像这样：

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

但当然，这并没有太大的改善。