CSS3新增选择器


后盾网 CSS3 课件 www.houdunwang.com 后盾网 人人做后盾 www.houdunwang.com主讲:岳英俊 Page . 2 作者:code宝宝 版权所有 仿造必究 后盾网 人人做后盾 www.houdunwang.com css常用选择器 什么是选择器? 当我们定义一条样式规则时候,这条样式规则会作用于网页当中的某 些元素,而我们的规定的这些元素的规则就叫做选择器 1. id选择器 ①#idname 2. 类选择器 ①.classname 3. 标签选择器 ①tagname 4. 交叉选择器 ①tagname.classname tagname#idname 5. 群组选择器 ①多个选择器用 “,”隔开 6. 后代选择器 (包含选择器 ) ①父级和子级 用空格 隔开 7. 通用选择器 ①*{} Page . 3 作者:code宝宝 版权所有 仿造必究 后盾网 人人做后盾 www.houdunwang.com css选择器特性 1. 继承性 ①后代元素会继承前辈元素的一些属性和样式 2. 叠加性 ①同一个元素,被多个样式规则指定。 3. 优先级 因为css的继承性和叠加性,就有了css优先级的概念。 Page . 4 作者:code宝宝 版权所有 仿造必究 后盾网 人人做后盾 www.houdunwang.com css选择器优先级示意图 所谓的优先级,指的就是哪条样式规则会最后作用于指定的元素,他只 遵循一条规则,指定的越具体优先级越高 Page . 5 作者:code宝宝 版权所有 仿造必究 后盾网 人人做后盾 www.houdunwang.com CSS3新增选择器 后代级别选择器 选择器 例子 例子描述 CSS element element div p 选择
元素内部的所有

元素。 1 element>element div>p 选择父元素为

元素的所有

元素。 2 :first-child p:first-child 选择属于父元素的第一个子元素的每个

元素。 2 :only-child p:only-child 匹配属于父元素中唯一的

元素。 3 :nth-child(n) p:nth-child(2) 匹配父元素中的第2个

子 元素。 n 可以是数字、关键词或公式 Odd 和 even 是可用于匹配下标是奇数或偶数的子元 素的关键词(第一个子元素的下标是 1) 3 :nth-last-child(n) p:nth-last-child(2) 同上,从最后一个子元素开始计数。 3 :last-child p:last-child 选择属于其父元素最后一个子元素每个

元素。 3 :root :root 选择文档的根元素。 3 :empty p:empty 选择没有子元素的每个

元素(包括文本节点)。 3 Page . 6 作者:code宝宝 版权所有 仿造必究 后盾网 人人做后盾 www.houdunwang.com CSS3新增选择器 同辈级别选择器 选择器 例子 例子描述 CSS element+element div+p 选择紧接在

元素之后的所有

元素。 2 element1~element2 p~ul 选择前面有

元素的每个

还剩8页未读

继续阅读

pdf贡献者

luolaner

贡献于2015-03-22

下载需要 8 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf