CSS line-by-line color change is actually very simple. You can use any of the following methods based on your needs. Of course, it should be suitable for your coding and requirements:
I. background image
If the row height is fixed, we recommend that you use the background image. We also recommend that you fix the Row Height! Compatible with all browsers.
Ii. CSS Expression
Text: color: expression (this. sourceIndex % 2? '# Ff000000':' #000000 ');
Background: background-color: expression (this. sourceIndex % 2? '# Ff000000':' #000000 ');
Note: The browser compatibility of this method is insufficient, and FF3 is not supported.
Iii. Define classes separately
<Ul>
<Li class = "bgcolor">...
<Li>...
<Li class = "bgcolor">...
<Li>...
</Ul>
Actually writing.
4. View instances through JS
Run code box
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <Html xmlns =" http://www.w3.org/1999/xhtml "> <Head> <meta http-equiv =" Content-Type "content =" text/html; charset = UTF-8 "/> <title> www.bkjia.com-four methods to Implement CSS line-by-line color change </title> <link href =" index.css "rel =" stylesheet "type =" text/ css "/>
Run code
Copy code
Save code
Add to favorites