奇偶选择器

一、奇偶选择器

表格在呈现数据的时候我们为了方便观看，而隔行显示不同的颜色，虽然可以用用类选择器 class实现这种效果，但是未免太过麻烦，为了更加简便地表现这种特殊的效果我们需要用到一种特殊的选择器，这就是奇偶选择器。

二、奇偶选择器的样式：

前面通常是一个标签或是其他类型的名字；
后面冒号 : 隔开,然后 n 表示第 n 个，child 表示子元素；
child 后面跟着一对括号( )，这个括号里表示究竟是第几个元素；
里面可以是一个数字或者是 odd(奇数个元素) 或者是 even(偶数个元素)
括号后面是大括号 { } ，可以在里面放上背景颜色样式；
odd 是单行
even是双行

三、奇偶选择器的应用

【奇偶选择器】使用odd和even属性，具体写法如下所示：

<style type="text/css">
tr:nth-child(odd) {.... }
table tr:nth-child(even) { .... }
</style>
<table>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
<tr><td>...</td></tr>
</table>

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

使用公式 (an + b)。描述：表示周期的长度，n 是计数器（从 0 开始），b 是偏移值。

在这里，我们指定了下标是 3 的倍数的所有 p 元素的背景色：

<!DOCTYPE html>
<html>
<head>
<style> 
p:nth-child(3n+0)
{
background:#ff0000;
}
</style>
</head>
<body>
<p>第一个段落。</p>
<p>第二个段落。</p>
<p>第三个段落。</p>
<p>第四个段落。</p>
<p>第五个段落。</p>
<p>第六个段落。</p>
<p>第七个段落。</p>
<p>第八个段落。</p>
<p>第九个段落。</p>
</body>
</html>

:nth-child(n) 选择器匹配属于其父元素的第 N 个子元素，不论元素的类型。

n 可以是数字、关键词或公式。

猜你喜欢