CSS 正则表达式 id 选择器与类选择器的性能答案

【问题标题】：Performance of CSS regex id selector vs class selectorCSS 正则表达式 id 选择器与类选择器的性能
【发布时间】：2017-07-24 12:40:15
【问题描述】：

假设我有第 2000 页的元素。我想从自定义模块中注入此页面元素（横幅）。该模块的 css 文件有 300+ 个 css 选择器，每个选择器需要有唯一的动态前缀，以避免与同一页面内的其他模块发生冲突。我不能使用 1 个唯一的 id 选择器，因为可以加载更多横幅，所以我需要使用这样的东西：

<div id="company_banner14"></div>
<div id="company_banner15"></div>
div[id^='company_banner']{

}

或

<div id="company_banner14" class="company_banner"></div>
<div id="company_banner15" class="company_banner"></div>
.company_banner{

}

从性能角度看什么更好？使用正则表达式选择器是不好的做法，300 个正则表达式选择器会产生明显的性能影响吗？

【问题讨论】：

【解决方案1】：

查看完您需要的是为所有元素定制 CSS。对于这个查询，有几点需要牢记。

使用内联 CSS- 我认为如果您不为一个元素使用长 CSS，内联 CSS 是最好的解决方案。如果您的循环元素太多，它会为您的页面节省非常宝贵的代码量。例如，<div id="company_banner15" class="company_banner" style="Width:x; height:y;"></div>
使用 CSS 类- 这是内联 CSS 的替代方式，但不像内联 CSS 那样节省代码。如果您对所有元素使用相同类型的样式，那么如果您在循环中使用不同类型的样式，则不是正确的。

希望这些建议能够指导您。谢谢和欢呼。

【讨论】：

会有 300 个不同的选择器，因为每个 div 都会有更多的元素。对 300 多个元素使用内联 css 是不行的。问题只是对里面的 300 个元素使用类选择器或 id 正则表达式选择器是否更好。内部的每个元素都需要定义父选择器以避免任何冲突。