Question

我希望使用css来设置大于和小于标志的样式。

我的HTML是这样的：

&lt;some text more text some text&gt;

我想要设计＆lt;和＆gt;迹象。我知道我可以用<span>包裹它，但是我可以在样式表中做这样的事情吗？

&gt; {
font-weight:bold;
font-family:sans-serif;
}

Answer 1

<强> Live demo (click).

<p class="my-class">some text more text some text<p>

CSS：

.my-class:before {
  content: '<';
  color: red;
}

.my-class:after {
  content: '>';
  color: blue;
}

唯一的另一种方法是用你说过的元素（最好是跨度）包装。为了完整起见，我将包含该解决方案：

<p>
  <span class="my-class">&lt;</span>
  some text more text some text
  <span class="my-class">&gt;</span>
<p>

CSS：

.my-class {
  color: red;
}

如果您愿意使用JavaScript，请举例： Demo (click).

示例加价：

<p class="my-class">&lt;some text more text some text&gt;<p>

<强> JavaScript的：

var elems = document.getElementsByClassName('my-class');

for (var i=0; i<elems.length; ++i) {
  var elem = elems[i];
  var childs = elem.childNodes;
  var len = childs.length;
  for (var j=0; j<len; ++j) {
    var node = childs[j];
    if (node.nodeName === '#text') {
      var text = node.textContent;
      var first = text.charAt(0);
      var last = text.charAt(text.length-1);
      if (first === '<' && last === '>') {
        text = text.split('');
        text.splice(0, 1);
        text.splice(text.length-1);
        text = text.join('');

        var left = document.createElement('span');
        left.className = 'my-span-class left';
        left.textContent = '<';

        var right = document.createElement('span');
        right.className = 'my-span-class right';
        right.textContent = '>';

        node.textContent = text;
        node.parentNode.insertBefore(left, node);
        node.parentNode.appendChild(right, node);
      }
    }
  }
}

Answer 2

将CSS应用于给定角色的唯一方法是:first-letter pseudo-class，显然这不符合您的需求。

CSS无法根据该角色选择角色。如果要对其进行样式设置，则必须添加其他元素。

Answer 3

另一个解决方案是包装你的＆amp; gt＆amp; LT;在onload之后通过javascript在一个范围内的标志（这对于之后动态添加的内容不起作用）。但简短的回答是否定的，css上没有基于内容的选择

Answer 4

由于已经在我的方法中建议了具有伪元素的解决方案：

如果您只需要在现代浏览器（支持font-family属性）上仅使用不同的font-weight和unicode-range（在您的问题中指定），则可以使用不同的字体 - 面对这两个符号

示例（使用Chrome，Opera和Safari，不使用Firefox，未在IE上测试）
http://codepen.io/anon/pen/KDgep

@font-face {
  font-family: lessgreaterthan;
  font-weight: bold;
  src: local('Arial');
  unicode-range: U+003C,U+003E;
}

p {
  font-family: lessgreaterthan, "times new roman";
}

风格＆gt; /＆lt;用css签名html

4 个答案: