Back to home

[笔记] CSS3 新增伪类和语法

2014-12-13 07:25:08 -0500

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.

效果:

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-前端笔记

本文地址:

«Newer      Older»
Comment:
Name:

Back to home

Subscribe | Register | Login | N