使用css为pre中的每一行设置样式

Question

我有HTML代码

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

如何在<pre>内的“行”中加入一些css样式，而不在其中添加其他包装？

我的意思是像

pre lines{ color: red}

我很难找到css选择器。提前谢谢。

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

Answer 2

如果您想为pre中的所有行添加颜色，只需添加

即可

pre {color: red;}

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

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

pre span {color: red;}