0

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を使用してかっこを含めることができ、属性 ( jfiddle demo:after ) に結び付けられました。しかし、演算子, ,を表示する運がありません。私は画像の背景を含めていじっていましたが、セレクターとセレクターを使用してこれを行う別の方法があるのではないかと思っていました。content¬&|<span class="operator"/>:before:after

何か案は？

4

1 に答える 1

0

ほら、例で提供されたもので動作します。より複雑な式でテストして、正しいことを確認する必要があります。

演算子を表示するために、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でチェックアウトできます。それがあなたの問題を解決するかどうか私に知らせてください。

于 2012-12-24T18:54:16.100 に答える