我有这个:
#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,如果我删除逗号,则没有任何效果。
有什么线索吗?
最佳答案
你可以这样做:
[id^="cbfr"] > .my_field {width: 95%;}
也就是说——“定位任何 .my_field
,它是 ID 以 cbfr
开头的元素的子元素”。
顺便说一句,您的单行尝试没有成功,因为逗号之间的每个部分都是一个完整的规则。为了让它工作,它必须看起来像这样:
#cbfr_196 > .my_field, #cbfr_197 > .my_field, #cbfr_198 > .my_field {width: 95%;}
当然,这并没有太大的改进。
关于CSS:如何缩短选择具有多个ID的直接子代的代码,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24275224/