使用css对每行内部进行样式化 [英] styling each line inside pre with css

问题描述

我有html代码

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

如何将一些CSS样式添加到

how can i put some css style to the "lines" inside <pre>, without adding other wrapper into it?

pre lines{ color: red}

m有困难找到的css选择器。提前感谢。

i'm having difficulties on finding the css selector for that. Thanks in advance.

推荐答案

您可以使用这个小CSS3技巧，使用渐变。这将自动创建一个斑马效果，无需额外的跨度：

You can use this little CSS3 trick, with gradients. This will create automatically, without extra spans, a "zebra" effect:

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;

尝试不同的CSSline-height，以便文字正确显示。

Try different CSS "line-height" so that the text appears correctly.

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

这篇关于使用css对每行内部进行样式化的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！