-5

我想只使用 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;}

但是，只有“apple pie”的部分变成了带有tag2的红色字体。

我如何解决它？

4

6 回答 6

4

您的代码需要修改。

<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>

这是工作演示

于 2013-08-05T12:31:19.400 回答
3

您必须进行以下更改

<span class="tag1">I love <span class="tag2">apple pie</span></span>
于 2013-08-05T12:32:51.047 回答
2

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

您不能选择单个文本节点。

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

<span class="tag1">I love <span class="tag2">apple pie</span></span>.
于 2013-08-05T12:30:46.693 回答
2

据我了解，您尝试匹配这样的标签：

   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>.
于 2013-08-05T12:39:48.053 回答
2

重新排列<span>标签。

<span class="tag1">I love <span class="tag2">apple pie</span></span>
于 2013-08-05T12:38:24.443 回答
0

进行以下更改：

<span class="tag1">I love <span class="tag2">apple pie</span></span>
于 2013-08-05T12:44:05.110 回答