CSS 如何在较复杂的HTML片段中使用选择器否定（但 …）

在本文中，我们将介绍如何在使用Enlive时，在较复杂的HTML片段中使用选择器否定（:not）。

阅读更多：CSS 教程

什么是选择器否定？

选择器否定是CSS中一种强大的选择器，它允许我们选择除指定元素以外的所有元素。它使用:not伪类来实现，其语法为:not(selector)。

在Enlive中使用选择器否定

Enlive是一种用于在Clojure中处理HTML的模板引擎。它允许我们使用CSS选择器来选择和操作HTML元素。在Enlive中使用选择器否定可以帮助我们更精确地选择目标元素。

让我们看一个示例，假设我们有一个较复杂的HTML片段：

<div class="container">
  <h1>Title</h1>
  <ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li class="highlight">Item 3</li>
    <li>Item 4</li>
  </ul>
  <p>Some text here</p>
</div>

我们想选择除了具有.highlight类的li元素之外的所有li元素。可以使用以下选择器否定：

.container li:not(.highlight) {
  color: red;
}

上述选择器将为除.highlight类之外的所有li元素设置红色。

示例说明

让我们详细了解一下如何使用选择器否定来操作上述示例中的元素。

在Enlive中，我们可以使用CSS选择器否定来选择和操作HTML元素。首先，我们需要引入Enlive库，然后使用以下语法来使用选择器否定：

(ns my-namespace
  (:require [net.cgrand.enlive-html :as html]))

(def html-snippet
  "<div class="container">
     <h1>Title</h1>
     <ul>
       <li>Item 1</li>
       <li>Item 2</li>
       <li class="highlight">Item 3</li>
       <li>Item 4</li>
     </ul>
     <p>Some text here</p>
   </div>")

(defn manipulate-html []
  (let [snippet (html/html-resource (java.io.ByteArrayInputStream. (.getBytes html-snippet)))]
    (html/transform snippet
      (html/$ "li:not(.highlight)" (html/set-attribute :style "color: red;")))))

上述代码首先定义了一个包含HTML片段的字符串，然后使用html/html-resource函数将其转换为Enlive DOM。

接下来，我们使用选择器否定li:not(.highlight)来选择除了具有.highlight类的li元素之外的所有li元素。使用(html/set-attribute :style "color: red;")将选定的元素的文本颜色设置为红色。

最后，我们使用html/transform函数将转换后的HTML应用到DOM上。