Question

如何仅从文本中更改颜色，除了标签之间的所有内容？

示例文字：

<b>A7</b>      <b>D</b>
this is a test
<b>A7+</b>      <b>G9</b>
this is a test

Answer 1

假设所有文本都包含在父元素中（我使用过<div>，但几乎任何其他元素就足够了），如下：

<div>
    <b>A7</b>
    <b>D</b>
    this is a test
    <b>A7+</b>
    <b>G9</b>
    this is a test
</div>

然后你不能改变“<b>标签以外的所有文本”，因为CSS不允许你设置文本样式而不影响<b>元素的颜色，你可以但是，设置div，然后'unstyle'b元素：

div {
    color: #f00;
}

div b {
    color: #000;
}

JS Fiddle demo

使用jQuery执行此操作（并且，老实说，根据您发布的信息，jQuery似乎是不必要的），您必须为未包含在b中的每个字符串创建包装元素元素，然后直接样式，或添加一个类，这些元素：

$('body').contents().filter(function(){
    return this.nodeType === 3 && this.nodeValue.trim().length > 0;
}).wrap('<span />').parent().css('color','red');

JS Fiddle demo

参考文献：

Answer 2

尝试：

body{color:red;}
b{color:black;}

Fiddle here.

Answer 3

您可以像这样使用jQuery：

$('body').css('color', '#FFCCFF');
$('b').css('color', '#000000');

但如果你能在CSS中做到这一点会更好：

body {
    color: #FFCCFF;
}

b {
    #000000;
}

Answer 4

由于您将此标记为jquery，因此我只是使用jquery为此提供了解决方案，您可以wrap您在paragraph标记中编写的html，如下所示。然后，您必须使用Jquery的.addClass函数为classes和paragraph标记设置不同颜色的bold。

HTML

<p><b>A7</b><b>D</b>
this is a test
<b>A7+</b><b>G9</b>
this is a test</p>

CSS

.Paragraph{
    color:red;
}

.boldtext{
    color:black;
}

JQUERY

$('p').addClass('Paragraph');
$('p > b').addClass("boldtext");

从文本中更改颜色，但所有内容都在标记<b> </b>之间

4 个答案:

HTML

CSS

JQUERY

DEMONSTRATION