简化长 CSS 选择器答案

【问题标题】：Simplifying long CSS selectors简化长 CSS 选择器
【发布时间】：2020-06-10 03:07:38
【问题描述】：

我有以下 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 选择器而不改变它匹配的内容并且不降低性能？

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

【问题讨论】：

您能否将样式应用于#AllContextMenus，然后针对特定菜单类型覆盖它？
需要更多上下文。
上下文无关紧要（我可以贴上几千行与这个选择器相关的代码，但没有人会真正阅读它，其他人无疑会抱怨）。我只是询问如何改进这个选择器而不改变它匹配的内容......没有别的。
@NiettheDarkAbsol 感谢您的建议。你的想法基本上就是我所做的。 #AllContextMenus 有样式，但是具体的子元素都需要对样式进行相同的修改。

标签： css optimization readability simplification code-structure

【解决方案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>

【讨论】：

这是一个在 cmets 中使用换行符的巧妙技巧。我的感谢和赞成！
使用您的技术，除了可能在每个 */ 之前添加空格之外，还有什么方法可以使代码更具可读性？
@RockPaperLizard 基于你的 HTML 也许你可以拥有这个； jsfiddle.net/erf10cqo 如果你想定位所有 menu-* 类
@TemaniAfif 谢谢你的建议。我喜欢你的想法。我需要检查数千行代码（其中大部分不是我写的），看看是否有可能发生这样的事情。我将花一点时间考虑一种自动化该过程的好方法，因为手动操作会非常耗时。