Question

我想只使用CSS控制字体颜色。我的HTML源代码如下。

HTML：

<!DOCTYPE html>
<html>
    <head>
        <meta charset=utf-8 />
        <title>JS Bin</title>
    </head>
        <body>
            <span class="tag1">I love <span class="tag2">apple </span>pie</span>.
        </body>
</html>

CSS：

我想将“我爱苹果”改为蓝色字体。

.tag1{color : blue;}

或

我想将“apple pie”改为红色字体。

.tag2{color : red;}

但是，只有“苹果派”的部分被改为带有tag2的红色字体。

我该如何解决？

Answer 1

您的代码需要修改。

<span class="tag1">I love <span class="tag2">appe</span> pie</span>

您的孩子<span>应该在父<span>

之前结束

这是解决方案。

<span class="tag1">I love <span class="tag2">apple pie</span></span>

以下是 WORKING DEMO

Answer 2

您必须进行以下更改

<span class="tag1">I love <span class="tag2">apple pie</span></span>

Answer 3

CSS可以（只有一些非常小的例外）只选择元素

您无法选择单个文本节点。

移动与<span class="tag2">匹配的结束标记，以便元素包含您想要更改颜色的所有文本。

<span class="tag1">I love <span class="tag2">apple pie</span></span>.

Answer 4

重新排列<span>代码。

<span class="tag1">I love <span class="tag2">apple pie</span></span>

Answer 5

根据我的理解，你试图匹配这样的标签：

   v________________________________________________v
<span class="tag1">I love <span class="tag2">apple</span> pie</span>.
                            ^___________________________________^

这在HTML中无效 - 所有子标记都需要包含在父元素的范围内。（也就是说，这也不起作用：<div><span> </div> </span>）

如果你想用一个班级和“苹果派”影响“我爱苹果”，你需要使用更多标签：

<span class="tag1">I love <span class="tag2">apple</span></span><span class="tag2"> pie</span>.

或者有一些缩进：

<span class="tag1">
    I love 
    <span class="tag2">
        apple
    </span>
</span>
<span class="tag2">
 pie
</span>.

Answer 6

进行以下更改：

<span class="tag1">I love <span class="tag2">apple pie</span></span>

我对HTML中的字体颜色有一些疑问

6 个答案: