CSS / 锚伪类

在 CSS 的锚伪类中有四种状态，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬停状态。

a:link {color: #FF0000}  /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

CSS2 / :first-child 伪类

注释：必须声明 <!DOCTYPE>，这样 :first-child 才能在 IE 中生效。

示例1：匹配第一个<p> 元素

demo text
demo text

示例二：匹配所有< p> 元素中的第一个<i> 元素

1.demo text  2.demo text.
 
1.demo text  2.demo text.

效果：

CSS3 / :nth-child(n) 伪类

这是本文的重点，利用这个伪类可以选择元素中排第n个元素，n可以是数字/关键字/公式。

li:nth-child(3) { …… }     /* 匹配所有li里面排第3的行 */
li:nth-child(2n+1) { …… }  /* 2n+1，公式，匹配所有奇数行 */
li:nth-child(odd) { …… }   /* odd：关键字，匹配所有奇数行 */
li:nth-child(2n) { …… }    /* 2n：匹配所有偶数行*/
li:nth-child(even) { …… }  /* even：关键字，匹配所有偶数行li */

注意：元素的第一个子元素索引为“1”。

利用这些方法可以方便选取所需元素，示例一：

HTML如下：

  
列表项哦列表项
  
列表项哦列表项
  
列表项哦列表项
  
列表项哦列表项

CSS如下：

li:nth-child(even) {  
background:#FFCC33;
}
li:nth-child(odd) {
background:#98E445;
}
li:nth-child(3n) {
background:red; //3n 是3倍的意思，选取每第三个
}

效果如下：

本文完 END

@本文作者: Cosplay，来自Cosplay-前端笔记

本文地址：