Question

我有一堆充满生成框的页面（我对它们的生成没有任何控制权），每个框都有一个唯一的widget-ID。在几十页的数百个盒子中，大约有8或10个我真的想作为一个班级来对待。我需要将统一的CSS应用于这些或其中的元素。我目前这样做的方式是：

#widget-1511991600116, #widget-1512001156652, #widget-1512078219775, #widget-1512078668199, #widget-1512078835003, #widget-1512079211541, #widget-1512079388316 {
    format . . .
    . . . box
}

和

#widget-1511991600116 a, #widget-1512001156652 a, #widget-1512078219775 a, #widget-1512078668199 a, #widget-1512078835003 a, #widget-1512079211541 a, #widget-1512079388316 a {
    format links . . .
    . . . within box
}

等

分配的数字没有模式，并且在这些数字之间存在数字，因此我无法根据数字的第一部分或任何内容进行属性选择。我必须能够专门针对这些数字。

有什么方法可以将所有这些整合成一种即时课程，并以这种方式与他们合作？或者我只是继续这种丑陋？

Answer 1

鉴于您当前的情况。似乎没有一种正确的方法（我可能错了）。我建议的是，如果您定位的框显示在某个特定的位置/位置，并且它们不会更改其位置/位置，那么您可以使用nth-child()或:nth-of-type()来定位它们并应用您想要的样式。我希望这有帮助。

Answer 2

由于这些元素ID不是遵循任何有意义的模式，而是完全随意的选择，没有任何其他知识的标记的性质或这些特定元素可能会或可能不会出现在哪些页面，没有办法缩短纯CSS中的选择列表。

当涉及到上下文选择器时，即使选择器4的:matches()被广泛使用，但由于每个上下文选择器的其余部分由以下内容组成，所以它并不会减少字节数。只有一个a。

如果您要使用预处理器执行此操作，则必须build a fairly complex mixin，此时您可能只是采用老式的方式。

将几个ID分组为即兴“类”

2 个答案: