简化长 CSS 选择器

Question

我有以下CSS选择器：

#AllContextMenus :not(.menu-iconic-left):not(.menu-accel):not(.menu-accel-left):not(.menu-accel-container):not(.menu-accel-container-left):not(.menu-iconic-accel):not(.menu-right)::before

出于可读性的目的，我喜欢将所有代码行保持在 100 个字符以下。

有没有办法在不更改匹配内容且不降低性能的情况下简化、优化或编写此 CSS 选择器？

例如，是否有任何类型的"and"运算符可以在:not()中使用？

Answer 1

如果不更改选择器的匹配内容的语义，通常无法简化选择器。

但是，您可以在多个点将选择器分解为多条线，以满足最大线长度要求。只需使用注释并将换行符放在注释中即可。喜欢这个：

#AllContextMenus :not(.menu-iconic-left)/*
*/:not(.menu-accel)/*
*/:not(.menu-accel-left)/*
*/:not(.menu-accel-container)/*
*/:not(.menu-accel-container-left)/*
*/:not(.menu-iconic-accel)/*
*/:not(.menu-right)::before

#AllContextMenus :not(.menu-iconic-left)/*
*/:not(.menu-accel)/*
*/:not(.menu-accel-left)/*
*/:not(.menu-accel-container)/*
*/:not(.menu-accel-container-left)/*
*/:not(.menu-iconic-accel)/*
*/:not(.menu-right)::before {
color:red;
content:'TEST '
}

<section id="AllContextMenus">
<div class="a">A</div>
<div class="menu-iconic-accel">menu-iconic-accel</div>
</section>