在前端开发中，我们经常需要使用样式选择器来对网页元素进行样式设置。其中 ":not" 选择器是一个非常有用的选择器，它可以选中不符合条件的元素。不过，由于浏览器的兼容性问题，有些浏览器可能无法完全支持 ":not" 选择器。针对这个问题，我们可以使用 LESS 中的类似语法来实现 ":not" 选择器的效果。
LESS 中的选择器
LESS 是一种 CSS 预处理器，它可以使 CSS 更加灵活和易于维护。LESS 中的选择器可以嵌套，这使得我们可以更好地组织 CSS 代码。例如：
---------- -
------ -
---------- -----
-
-上面的代码中，".container" 是一个 class，".title" 是它的一个子元素。当我们使用 .title 选择器时，实际上是选中了 ".container .title" 这个元素。
LESS 中的类似 ":not" 选择器的语法
LESS 中用于类似 ":not" 选择器的语法是 "~"，它表示选择器之间的非严格相邻关系。例如：
---------- -
------- -
----------------- --------
-
- ---------- -
----------- --- ----- -----
-
-上面的代码中，当我们将鼠标悬停在 ".list-item" 这个元素上时，背景色会变成 #f5f5f5。而"~ .list-item" 表示选中 ".list-item" 之后的所有兄弟元素，再设置它们的顶边框为 1px 实线的 #ddd。
这样，我们就可以通过 LESS 中的类似 ":not" 选择器的语法来实现选择器之间的非严格相邻关系。
示例代码
下面是一个示例代码，它使用了 LESS 中的类似 ":not" 选择器的语法来选中所有不是第一个和最后一个的 ".list-item" 元素，并更改它们的背景色：
---------- -
------- -
----------------- --------
-
- --------------------------------------------- -
----------------- --------
-
-上面的代码中，"~ .list-item:not(:first-child):not(:last-child)" 表示选中 ".list-item" 标签之后的所有 "非第一个并且非最后一个" 的标签。这样，我们就可以用非常灵活的方式对网页元素进行样式设置。
总结
通过 LESS 中的类似 ":not" 选择器的语法，我们可以更方便地实现对网页元素的样式设置，提高代码的可读性和可维护性。在实际开发中，我们应该灵活运用 LESS 的各种语法，使代码更加简洁、清晰和易于维护。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653fe4f07d4982a6eb9753f6