使用CSS为pre中的每行添加样式

Question

i have html code

<pre>
line 1
line 2
line 3
</pre>

如何在<pre>标签内部的“行”上添加CSS样式，而不需要添加其他包装器？

我的意思是像这样:

pre lines{ color: red}

我在寻找那个CSS选择器时遇到了困难。提前感谢。

- Lee

---

“lines” 究竟是什么意思？为什么不能直接给 pre 元素设置颜色？ - Pekka

@Pekka：他的意思是在每一行上给出不同的样式。 - Shakti Singh

@Shakti 我不确定那个 - 这个例子不够清晰。 - Pekka

看起来Lee想把这些行当作单独的div，例如给它们着色成斑马条纹或者放在盒子里...我不知道有什么方法可以做到这一点而不使用内部容器... - opatut

是的，如果你想要单独为每一行设置样式，在纯HTML/CSS中是不可能的。容器的内容是一个文本节点，无法被具体地定位以进行样式设置。 - Pekka

@opatut，是的，这正是我要做的事情。可以使用一些包装器轻松完成，但问题是，我只有“pre”（带有其内容行），没有任何包装器。 - Lee

Answer 1

您可以使用这个小的CSS3技巧，借助渐变效果创建一个"斑马线"效果，无需额外的标签。

background: #555;
background-image: -webkit-linear-gradient(#555 50%, #505050 50%);
background-image:    -moz-linear-gradient(#555 50%, #505050 50%);
background-image:     -ms-linear-gradient(#555 50%, #505050 50%);
background-image:      -o-linear-gradient(#555 50%, #505050 50%);
background-image:         linear-gradient(#555 50%, #505050 50%);
background-position: 0 0;
background-repeat: repeat;
background-size: 4.5em 4.5em;

尝试不同的CSS "line-height"以使文本正确显示。

参见：http://www.dte.web.id/2012/03/css-only-zebra-striped-pre-tag.html#.UUoV6lugkoM

- benske

Answer 2

如果您想要给

中的所有行添加颜色，只需添加以下代码：
pre {color: red;}


但是如果您想要为某些行添加颜色，您需要额外的标记：

<pre>
<span>Line1</span>
line2
<span>Line3</span>
</pre>

pre span {color: red;}

- DStereo