css3选择器概述.ppt

要使用css对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器。 HTML页面中的元素就是通过CSS选择器进行控制的。 选择器 css选择器的种类 元素选择器“E” 类选择器“.” ID选择器“#” 复合选择器 通用选择器“*” 伪类选择器“:” 1.元素选择器“E” 将HTML某些元素作为选择器，例如p、h1、a等等标签 语法： 元素选择器 属性 值 2.类选择器“.” 通过HTML中class属性值，描述一组元素的样式，可以在多个元素中使用，通过选择符“.”来定义 语法： 类选择器 属性 值 3.ID选择器“#” 通过HTML中id属性值，描述特定元素的样式，因为id属性值唯一，故id选择器是唯一选择器，通过选择符“#”来定义 语法： ID选择器 属性 值 4.复合选择器 复合选择器包括以下几类选择器 交集选择器 并集选择器 后代选择器（以空格分隔） 子元素选择器（以大于号分隔） 相邻兄弟选择器（以加号分隔） 普通兄弟选择器（以破折号分隔） 属性选择器 4.1交集选择器 满足所有列出的条件的对象 语法：选择器直接连接写 例如：h3.class{color：red} 选择HTML里符合元素h3且class属性值为class的所有对象 4.2并集选择器 又称为群集选择器，或选择器的分组。 意思是给所有这些指定的对象设置相同的样式规则。对象可以用元素选择器、类选择器和ID选择器表示。 语法：选择器以逗号“,”分隔 例如：h3,.class{color:red}选择HTML里符合元素h3和class属性值为class的所有对象 4.3后代选择器 后代选取器匹配所有值得元素的后代元素。 语法：选择器以空格分隔 后代选取器的使用非常广泛，不仅元素选择器可以以此种方式组合，类选择器和ID选择器都可以如此嵌套 4.3后代选择器 例子： div p{background-color:yellow;} div p段落 1。 在 div 中。/p p段落 2。 在 div 中。/p /div p段落 3。不 在 div 中。/p p段落 4。 不在 div 中。/p 4.4子元素选择器 与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素子元素的元素。 语法：选择器以大于号“”分隔 如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（Child selector）。 4.4子元素选择器 例子： divp{background-color:yellow;} div h2div标题/h2 p被选择的A/p /div div spanp不能选择的B/p/span /div p不能选择的C/p 4.5相邻兄弟选择器 可选择紧接在另一元素后的元素，且二者有相同父元素。 语法：选择器以加号“+”分隔 4.5相邻兄弟选择器 例子：选取所有位于 div 元素后的第一个 p 元素: div+p{background-color:yellow;} div pdiv子元素不会被选择/p div/div pdiv后的p标签会被选择/p /div p只要是div后的第一个p标签会被选择/p p尔后的p标签不会被选择/p 4.6普通相邻兄弟选择器 选取所有指定元素的相邻兄弟元素 语法：选择器以破折号“~”分隔 4.6普通相邻兄弟选择器 例子：选取所有 div 元素的所有相邻兄弟元素 p : div~p{background-color:yellow;} div p段落 1。 在 div 中。/p p段落 2。 在 div 中。/p /div p段落 3。不在 div 中。/p p段落 4。不在 div 中。/p 4.7属性选择器 属性选择器可以根据元素的属性及属性值来选择元素。 1、简单属性选择 如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。 如果您希望把包含标题（title）的所有元素变为红色，可以写作： *[title] {color:red;} 4.7属性选择器 2、根据具体属性值选择 除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。 例如，假设希望将指向 Web 服务器上某个指定文档的超链接变成红色，可以这样写： a[href=/about_us.asp] {color: red;} 5.伪类选择器 CSS伪类是用来添加一些选择器的特殊效果。 anchor伪类 在支持 CSS 的浏览器中，链接的不同状态都可以以不同的方式显示 a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color: