HTML/CSS (32)

css实现li奇偶行不同颜色样式

毒药      3660阅读
毒药 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css实现li奇偶行不同颜色样式 li标签实现不同行颜色不一样（奇数行、偶数行）</title>
<style>
#list li:nth-of-type(odd){ background:#00ccff;}/*奇数行 */
#list li:nth-of-type(even){ background:#ffcc00;}/*偶数行 */
</style>
</head>
 
<body>
<div>
    <ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    </ul>
</div>
</body>
</html>

注：
1、:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素.
n 可以是数字、关键词或公式。
2、odd 和 even 是可用于匹配下标是奇数或偶数的子元素的关键词（第一个子元素的下标是 1），我们为奇数和偶数 li 元素指定两种不同的背景色：

奇偶
   3660阅读
目前尚无回复
请 登录 后发表评论