CSS 复合选择器.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,CSS,复合选择器,相关知识：,CSS,的复合选择器,1.1,CSS,的层叠性,1.2,CSS,的继承特性和优先级,1.3,背景常用的属性名、属性值,1.4,1.1,复合选择器,1.1.1,交集选择器,指满足所有列出的条件的对象。,标记名、类名,h3.special,.special,h3,p/*,标记选择器*,/,color:blue,;,p.special,/*,标记,.,类别选择器*,/,color:red,;/*,红色*,/,.special/*,类别选择器*,/,color:green,;,普通段落文本（蓝色）,普通标题文本（黑色）,指定了,.special,类别的段落文本（红色）,指定了,.special,类别的标题文本（绿色）,又称群集选择器，或选择器的分组。,意思是给所有这些指定的对象设置相同的样式规则。对象可以用基本选择器、类选择器和,ID,选择器表示。,1.1.2,并集选择器,并集选择器,h1,h2,h3,h4,h5,p/*,并集选择器*,/,color:purple,;/*,文字颜色*,/,font-size:15px;/*,字体大小*,/,h2.special,.special,#one/*,集体声明*,/,text-,decoration:underline,;/*,下画线*,/,示例文字,h1,示例文字,h2,示例文字,h3,示例文字,h4,示例文字,h5,示例文字,p1,示例文字,p2,示例文字,p3,1.1.3,后代选择器,在嵌套的标记中，如果想为嵌套在里层的对象设置样式，可以使用后代选择器。,这是最外层的文字，,这是中间层的文字，,这是最内层的文字，,最外层是,标记，里面嵌套了,标记，,标记中又嵌套了,标记，则称,是,的子元素，,是,的子元素。,1.1.3,后代选择器,后代选择器,p span/*,嵌套声明*,/,color:red,;/*,颜色*,/,1.1.3,后代选择器,span,color:blue,;/*,颜色*,/,嵌套使,用,CSS,（红色）,标记的方法,嵌套之外的,标记（蓝色）,不生效,1.1.3,后代选择器,后代选择器的使用非常广泛，不仅标记选择器可以以这种方式组合，类别选择器和,ID,选择器都可以进行嵌套。,下面是一些典型的代码：,1.1.3,后代选择器,.special i color:red;/*,使用了属性,special,的标记里面包含的,*/,#one,li,padding-left:5px;/*ID,为,one,的标记里面包含的,*/,td.out,.inside strong font-size:16px;/*,多层嵌套，同样实用*,/,1.1.3,后代选择器,上面的第,3,行使用了,3,层嵌套，实际上更多层的嵌套在语法上都是允许的。,1.1.3,后代选择器,1.1.4,子元素选择器,与后代选择器相比，子元素选择器（,Child selectors,）只能选择作为某元素子元素的元素。,选择子元素,如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（,Child selector,）。,例：如果希望选择只作为,h1,元素子元素的,strong,元素。,h1 strong,color:red,;,This is,very,important.,This is,really,very,important,这个规则会把第一个,h1,下面的,strong,元素变为红色，但是第二个,strong,不受影响。,1.1.4,子元素选择器,1.1.5,属性选择器,属性选择器可以根据元素的属性及属性值来选择元素。,1,、简单属性选择,如果希望选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。,如果您希望把包含标题（,title,）的所有元素变为红色，可以写作：,*,title,color:red,;,1.1.5,属性选择器,2,、根据具体属性值选择,除了选择拥有某些属性的元素，还可以进一步缩小选择范围，只选择有特定属性值的元素。,例如，假设希望将指向,Web,服务器上某个指定文档的超链接变成红色，可以这样写：,ahref,=color:red;,1.1.6,相邻兄弟选择器,如果需要选择紧接在另一个元素后的元素，而且二者有相同的父元素，可以使用相邻兄弟选择器。,例如，如果要增加紧接在,h1,元素后出现的段落的上边距，可以这样写：,h1+p margin-top:50px;,这个选择器读作：“选择紧接在,h1,元素后出现的段落，,h1,和,p,元素拥有共同的父元素”。,li,+,li,color:#f00;,上面这个选择器只会把列表中的第二个和第三个列表项变为粗体。第一个列表项不受影响。,用一个结合符只能选择两个相邻兄弟中的第二个元素。,1.1.6,相邻兄弟选择器,1.2,样式的叠加性,问题：,对于同一个页面中的某个元素，如果在外部样式表中描述了属性,a,在内嵌入样式表中描述了属性,b,，或在行内样式表中描述了属性,C,，此时这些属性定义的样式都会生效吗？,答案：会。,对页面中的某个元素，不管在什么位置写的样式规则，都会对该元素起作用，不发生冲突时，样式会叠加；发生冲突时，优先级高样式的生效。,1.3 CSS,的继承特性,CSS,样式表继承指被包在内部的标记将拥有外部标记的样式。,并不是所有的属性都会传递给子孙元素，例如：,boder,、,Padding,、,Margin,、,background,等。,问题：,对于同一个页面中的某个元素，可以在外部样式表、内嵌入样式表和行内样式表中同时定义了某个属性，此时会哪个样式会生效呢？,样式优先级：“行内样式表”,“,内联样式表”,“,外部样式表”（就近原则）,ID,选择器,类别选择器,标记选择器 的样式,样式表的优先级,1.4,背景常用的属性名、属性值,Background,属性定义对象的背景。,