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

Question

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

考虑以下表达式:

([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)。但没有运气显示运算符(operator) ¬ , & , | .我一直在玩弄一个 <span class="operator"/>有图像背景，但我想知道是否有另一种方法可以使用 :before和 :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: ' ( ¬ ';
}​

您可以在这个 fiddle 中查看.如果这能解决您的问题，请告诉我。