结构化伪类 first-child , last-child , nth-child,

结构化伪类可以根据标记的结构应用样式,比如根据某元素的父元素或前面的同胞

元素是什么。


1. :first-child 和 :last-child
e :first-child
e :last-child
:first-child 代表一组同胞元素中的第一个元素,而 :last-child 则代表最后一个。
比如,把下面的规则
ol.results li:first-child {color:blue;}
应用给以下标记:
<ol class="results">
<li>My Fast Pony</li>
<li>Steady Trotter</li>
<li>Slow Ol' Nag</li>
</ol>
文本“My Fast Pony”就会变成蓝色。如果选择符改成这样:
ol.results li:last-child {color:red;}

那变成红色的文本就是“Slow Ol’ Nag”了。


2. :nth-child  odd(奇数) 或 even(偶数)
e :nth-child(n)
e 表示元素名, n 表示一个数值(也可以使用 odd 或 even ) 。
例如,
li:nth-child(3)
会选择一组列表项中的每个第三项。

:nth-child 伪类最常用于提高表格的可读性



你可能感兴趣的:(结构化伪类 first-child , last-child , nth-child,)