CSS的多种选择器的使用_3.ppt

主要内容 什么是样式选择器 HTML选择器 类选择器 ID选择器 关联选择器 组合选择器 伪元素选择器 什么是样式选择器 Selector { /* Selector 是样式选择器 */ property:value; /* color:red; */ property:value; /* font-size:4cm; */ … } Selector:当定义一条样式规则时，必须指定受这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector(选择器)，也就是选择该样式规则作用于的网页元素。 HTML选择器 HTML有标签， CSS就用选择器 选择符就是赋予内部或外部样式表的名字 HTML的标签，用来改变一个指定标签的样式 任何一个元素都可以是一个CSS选择符 类选择器 同一个选择器能有不同的类，因而允许同一个元素有不同的样式 定义方法 [tag].类名 （类名是自定义的,如果不加tag则代表所有HTML元素） tag class=“类名 类名1 类名2” （同一个元素可以使用多个类，类名之间使用空格分开） ID选择器 在HTML页面中， ID属性指定了某个单一元素，id属性就用来对单一元素定义单独样式 一个HTML页面中，ID属性值要唯一 定义：#idname { } (idname是自定义的名称) 使用：tag id=“idname” 关联选择器 关联选择器只不过是一个用空格隔开的两个或更多的单一选择器给成的字符串 因为层叠顺序的规则，它们的优先权比单一的选择符大 必须按关联关系使用，不能有反顺序 只要能保持关联关系就可以，不管是在多少层 组合选择器 为了减少样式表的重复声明，组合是允许的 只要使用英文逗号（,）隔开每个选择符就可以了 伪元素选择器 伪元素选择器是指对同一个HTML元素在不同的状态下的一种定义方式 目前只有a和p两处HTML元素可以使用 使用时的语法 标签：伪元素 标签［.类名］：伪元素 a:link 没有任何运作前的状态 a:hover 光标移到到超链接上的状态 a:active: 选择超链接的状态 a:visited 访问过超连接的状态 p:first-letter 一个段落中首个字母的状态 P:first-line 一个段落中首行的状态 样式规则的继承 所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。 样式规则的优先级 关联ID选择器CLASS选择器HTML标签选择器 * *