时间戳

首页 > 解决方案 > 简化长 CSS 选择器

css - 简化长 CSS 选择器

问题描述

我有以下 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()？

标签： cssoptimizationreadabilitysimplificationcode-structure

解决方案

您通常无法在不更改匹配内容的语义的情况下简化选择器。

但是您可以在许多点将选择器分成多行以满足最大行长度要求。只需使用注释并将换行符放在注释内即可。像这样：

#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>

推荐阅读