html - 使用 css 将 dom 格式化为表达式

Question

我正在创建一个使用标签的网站，并且需要使用运算符not、and、执行基本标签代数or。我有一个描述表达式但无法使用 css 显示表达式的 dom 元素。

考虑以下表达式：

([Green] or ((not [Blue]) and ([Red] or (not [Yellow]))))

在dom中表示为：

<span class="tag-expression">
  <span class="tag-or">
    <span class="tag" value="green">Green</span>
    <span class="tag-and">
      <span class="tag-not">
        <span class="tag" value="blue">Blue</span>    
      </span>
      <span class="tag-or">
        <span class="tag" value="red">Red</span>
        <span class="tag-not">
          <span class="tag" value="yellow">Yellow</span>
        </span>
      </span>
    </span>
  </span>
</span>

我设法使用 css' 包含括号:before并:after与content属性（jfiddle demo）绑定。但是没有运气显示运营¬商&，，|。我一直在玩弄包含<span class="operator"/>图像背景的 a ，但我想知道是否有另一种方法可以使用:beforeand:after选择器来实现这一点。

有任何想法吗？

Answer 1

在这里，它适用于您在示例中提供的内容，您应该用更复杂的表达式对其进行测试以确保它是正确的。

我在 CSS 脚本的末尾添加了一些复杂的 CSS 选择器以显示您的运算符：

.tag-expression .tag-or > span:nth-child(2):before {
    content: ' | (';   
}

.tag-expression .tag-and > span:first-child:after {
    content: ' ) & ';
}

.tag-expression .tag-not:before {
    content: ' ( ¬ ';
}​

你可以在这个小提琴中签出这个。让我知道这是否能解决您的问题。