黑马程序员技术交流社区

标题: 【广州PHP】css3新增的选择器 [打印本页]

---

作者: gz_xudada    时间: 2018-1-19 15:29
标题: 【广州PHP】css3新增的选择器


css3新增的选择器

1.1. css3中的结构性伪类选择器

选择器	功能
E:first-child	匹配第一个子元素
E:last-child	匹配最后一个子元素
E:nth-last-child(n)	匹配倒数第n个子元素
E:nth-child(n)	匹配第n个子元素
E:nth-child(2n)或 E:nth-child(even)	匹配偶数的子元素  如：2、4、6...
E:nth-child(2n+1) E:nth-child(odd)	匹配奇数的子元素  如：1、3、5...
E:only-child	匹配有且只有一个子元素 (独生子女)

样式:

html结构:

效果图:

1.2. css3中的伪元素选择器

选择器	功能
:first-letter	为某个元素的第一行文字使用样式
:first-line	为某个元素中的文字的首字母或第一个字使用样式
::before	在某个元素之前插入一些内容
::after	在某个元素之后插入一些内容

1.3. hover选择器

E:hover选择器

鼠标移动到E元素上后触发

1.4. hover小案例:隔行变色

html代码:

css代码:

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2