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

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

元素是什么。 spa


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”了。 ast


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

:nth-child 伪类最经常使用于提升表格的可读性 class

相关文章
相关标签/搜索