Web前端开发 课件 第10章 CSS3新增选择器.pptxVIP

第10章CSS3新增选择器 学习任务任务1 了解CSS3的历史及现状任务2 熟练掌握CSS3的新增选择器学习路线/ 12 / 1210.1 CSS3简介CSS3是最新的CSS标准。CSS3现在还在发展中，我们现在所说的CSS3，指的是那些在CSS2.1之后发布的所有东西。目前在使用CSS3开发时，还要注意到某些浏览器对CSS3的支持不是太好，比如IE10及更低版本。可以在/查看CSS官方文档。可以在/查询某属性方法的浏览器支持性。CSS3的优势是能够使网站变得非常炫酷。CSS3能够代替许多之前需要用JavaScript、jQuery才能实现的显示效果，为用户带来更好的操作体验。CSS3完全向后兼容，没有必要修改已有的设计，浏览器将继续支持CSS2。CSS3的主要影响是可以使用新的选择器和属性。在实际开发中，一个好的前端开发是以渐进增强和优雅降级的思想进行设计与开发的，即在编写页面时首先要保证核心功能一定能实现，使任何低端浏览器都能看到主要内容。 / 1210.2 兄弟选择器兄弟选择器与CSS2中的相邻兄弟选择器是不一样的。相邻兄弟选择器是指两个元素相邻，拥有同一个父元素；兄弟选择器是第一个元素之后的所有兄弟（同父）元素2都会被选中，这些兄弟元素2可以与第一个元素不相邻。 格式如下：元素1 ~ 元素2 { 属性1: 值1 ; 属性2: 值2 ; 属性3: 值3 ; ... }例如样式代码如下： h2~p { color: red ; } HTML代码如下：h1一级标题/h1p前面的兄弟不变色/ph2二级标题/h2p后面的兄弟变色/ph3三级标题/h3p后面的兄弟还是变色/pdivp我和h2不是兄弟，不变色/p/div / 1210.3 新增的属性选择器CSS的属性选择器如下表所示。属性选择器描述备注元素[属性]选取所有带指定属性的元素元素[属性=指定值]选取属性值等于指定值的元素元素[属性~=指定值]选取属性值中包含指定值，且指定值前后只能有空格的元素。元素[属性|=指定值]选取属性值以“指定值”或“指定值-”开头的元素。元素[属性^=指定值]选取属性值中以指定值开头的元素。例：a[href^=http://]CSS3新增元素[属性$=指定值]选取属性值中以指定值结尾的元素。例：a[href$=.cn]CSS3新增元素[属性*=指定值]选取属性值中包含指定值的元素。CSS3新增 / 12示例代码如下 。（1）样式代码td[lang] { color:red; }/* 带lang属性的 */td[title=a] { color:red; } /* title属性等于a的 */td[title~=c] { color:red; } /* title属性中有c且c前后什么都没有或只有空格的 */ td[title|=hello] { color:red; } /* title属性以hello或hello-开头 */td[title^=l] { color:red; }td[title$=o] { color:red; }td[title*=x] { color:red; }/* title属性开头是l的 *//* title属性结尾是o的 *//* title属性包含x的 */（2）HTML代码tabletrtd黑/td/tr/tabletabletrtd lang=红/td/tr/tabletabletrtd title=a红/tdtd title=a b黑/td/tr/tabletabletrtd title=c红/tdtd title=a c b红/tdtd title=c b红/tdtd title=ac b黑/tdtd title=a cb黑/td/tr/tabletabletrtd title=hello红/tdtd title=hello-红/tdtd title=hello-etwt yyy红/tdtd title=hhh eeee-hello红/tdtd title=-hello红/tdtd title=world hello红/tdtd title=-hello-黑/tdtd title= hello 黑/td/tr/tabletabletrtd title=l红/tdtd title=lm红/tdtd title=l m红/tdtd title=l-m红/tdtd title=m-l黑/td/tr/tabletabletrtd title=o红/tdtd title=op黑/tdtd title=po红/td/tr/tabletabletrtd title=x红/tdtd title=xo红/tdtd title=oxo红/td/tr/table 伪类名含义指定元素:first-child找到各级元素中处于第1