CSS3第二章CSS3新增的选择器幻灯片.pptVIP

第二章 CSS3 新增的选择器 目标 了解CSS3新增加的属性选择器 了解结构性伪类选择器 掌握每个CSS版本提供了哪些选择器 CSS3 新增选择器 字符串匹配属性选择器 结构性伪类选择器 UI元素状态伪类选择器 否定伪类选择器 目标伪类选择器 通用兄弟元素选择器 字符串匹配属性选择器 E[att^=val] 匹配具有att属性，并值以val开头的E元素 E[att$=val] 匹配具有att属性，并且值以val结尾的E元素 E[att*=val] 匹配有att属性，并且值中含有val的E元素 字符串匹配属性选择器 匹配具有att属性，并且值以val开头的E元素 E[att^=“val”] p[title^=val] {color:#FF0000;} 字符串匹配属性选择器 匹配具有att属性，并且值以val结尾的E元素 E[att$=“val”] p[title$=val] {font-weight:bold;} 子串匹配属性选择器 匹配具有att属性，并且值含有val的E元素 E[att*=“val”] p[title*=val] {font-weight:bold;} 结构性伪类 E:root E:nth-child(n) E:nth-last-child(n) E:nth-of-type(n) E:nth-last-of-type(n) E:last-child E:first-of-type E:only-child E:only-of-type E:empty 结构性伪类 E:root 匹配文档的根元素。在HTML中，根元素永远是HTML E:root html:root {background-color:#DCDCDC;} 结构性伪类 E:nth-child(n) 匹配父元素中的第n个子元素E E:nth-child(n) p:nth-child(2) {color:#FF0000;} 表格的单行与双行显示不同的颜色 tr:nth-child(2n+1){background-color: green;} tr:nth-child(2n){background-color: red;} 结构性伪类 E:nth-last-child(n) 匹配父元素中的倒数第n个结构子元素E E:nth-last-child(n) p:nth-last-child(1) {color:#FF0000;} 结构性伪类 E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E E:nth-of-type(n) p:nth-of-type(3) {color:#FF0000;} 结构性伪类 E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素E E:nth-last-of-type(n) p:nth-last-of-type(2) {color:#FF0000;} 结构性伪类 E:last-child 匹配父元素中最后一个E元素 E:last-child p:last-child {color:#FF0000;} 结构性伪类 E:first-of-type 匹配同级兄弟元素中的第一个E元素 E:first-of-type p:first-of-type {color:#FF0000;} 结构性伪类 E:only-child 匹配属于父元素中唯一子元素的E E:only-child p:only-child {color:#FF0000;} 结构性伪类 E:only-of-type 匹配属于同类型中唯一兄弟元素的E E:only-of-type p:only-of-type {color:#FF0000;} 结构性伪类 E:empty 匹配没有任何子元素（包括text节点）的元素E E:empty strong:empty {display:block;width:200px;height:20px;background-color:#EEEEEE;} UI元素状态选择器 E:checked (被选中) E:enabled (可用) E:disabled (不可用) E::selection (被用户选中) UI元素状态选择器 E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E E:checked input:checked {margin:0 50px;} UI元素状态选择器 E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素 E:enabled input:enabled {background-color:#FF0000;} UI元素状态选择器 E:disabled 匹配所有用户界面（form表单）中处于不