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

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