css如何实现隔行变色?

来自:互联网
时间:2019-11-11
阅读:
免费资源网 - https://freexyz.cn/

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS实现隔行变色:

<html>
<head>
    <style>
      #list1 li:nth-of-type(odd){ background:#00ccff;}/*奇数行*/ 
      #list1 li:nth-of-type(even){ background:#ffcc00;}/*偶数行 */ 
      #list2 li:nth-child(4n+1){ background:#00ccff;}/*从第一行开始算起 每隔4个(包含第四个)使用此样式 */ 
      #list00000 li:nth-child(4n+2){background:#090;}/*从第二行开始算起 每隔4个(包含第四个)使用次样式 */ 
      #list00000 li:nth-child(4n+3){background:#009;}/*从第三行开始算起 每隔4个(包含第四个)使用次样式 */ 
      #list00000 li:nth-child(4n+4){background:#990;}/*从第四行开始算起 每隔4个(包含第四个)使用次样式 */
        </style>
</head>    
<body>
    <div> 
        <ul id="list1"> 
        <li>1111111</li> 
        <li>222222222222</li> 
        <li>333333333</li> 
        <li>44444444</li> 
        <li>55555555555555</li> 
        <li>66666666666666666</li> 
        </ul> 
        <hr /> 
        <ul id="list2"> 
        <li>1111111</li> 
        <li>222222222222CSS3</li> 
        <li>333333333</li> 
        <li>44444444</li> 
        <li>55555555555555</li> 
        <li>66666666666666666</li> 
        </ul> 
        </div>
</body>
</html>

效果如下:

1.jpg

css的:nth-of-type()选择器可以使用奇数和偶数作为关键字来匹配奇数和偶数行,使奇数和偶数行样式不同实现隔行变色。

:nth-of-type(n)选择器匹配同类型中的第n个同级兄弟元素。

n可以是一个数字,一个关键字,或者一个公式。奇数和偶数是可以作为关键字使用用于相匹配的子元素,其索引是奇数或偶数

免费资源网 - https://freexyz.cn/
返回顶部
顶部