第4章-复杂选择器和优先级.pptx

,Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,dcsujn,#,Click to edit Master title style,济南大学,第四章 复杂选择器和优先级,后代选择器,又称为包含选择器,通过依据元素在其位置的上下文关系来定义样式，可以使标记更加简洁。,我们可以定义后代选择器来创建一些规则，使这些规则在某些文档结构中起作用，而在另外一些结构中不起作用。,比方说，你只希望,列表中的,strong,元素,变为斜体字，而不是通常的粗体字，可以这样定义一个选择器：,后代选择器,我是粗体字，不是斜体字，因为我不在列表当中，所以这个规则对我不起作用,我是斜体字。这是因为,strong,元素位于,li,元素内。,我是正常的字体。,li strong,font-style:italic;,font-weight:normal;,例如：,后代选择器,strong,color:red;,h2,color:red;,h2 strong,color:blue;,例如：,CSS,规则,The strongly emphasized word in this paragraph is,red,.,This subhead is also red.,The strongly emphasized word in this subhead is,blue,.,举例（,descendantselector,）,后代选择器,在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（,combinator,）。每个空格结合符可以解释为,“,.,在,.,找到,”,、,“,.,作为,.,的一部分,”,、,“,.,作为,.,的后代,”,，但是要求必须从右向左读选择器。,因此，,h2 strong,选择器可以解释为,“,作为,h2,元素后代的任何,strong,元素,”,。如果要从左向右读选择器，可以换成以下说法：,“,包含,strong,的所有,h2,会把以下样式应用到该,strong,”,。,有关后代选择器有一个易被忽视的方面，即两个元素之间的层次间隔可以是无限的。,例如,:,这个语法就会选择从,ul,元素继承的所有,em,元素，而不论,em,的嵌套层次多深。,因此，,ul em,将会选择以下标记中的所有,em,元素：,ul em color :red ;,后代选择器,List item 1,List item 1-1,List item 1-2,List item 1-3,List item 1-3-1,List item,1-3-2,List item 1-3-3,List item 1-4,List item 2,List item 3,子选择器,如果您不希望选择任意的后代元素，而是希望缩小范围，只选择某个元素的子元素，请使用子元素选择器（,Child selector,）。,与后代选择器相比，子选择器只能选择作为某元素子元素的元素,子选择器使用,大于号,表示,例：,举例（,childselector,）,h1,strong color:red;,This is,very,very,important.,This is,really,very,important.,如果从右向左读，选择器,h1 strong,可以解释为,“,选择作为,h1,元素子元素的所有,strong,元素,”,。,相邻兄弟选择器,相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素,相邻兄弟选择器使用,加号,(+),表示,例如，如果要改变紧接在,h1,元素后出现的段落为粗体，可以这样写：,说明：用一个,+,只能选择两个相邻兄弟中的,第二个元素,举例（,adjacent_sibling_selector1,）,h1,+,p font-weight:bold;,这个选择器读作：,“,选择紧接在,h1,元素后出现的段落，,h1,和,p,元素拥有共同的父元素,”,。,相邻兄弟选择器,li,+,li,font-weight:bold;,例如：,List item 1,List item 2,List item 3,List item 1,List item 2,List item 3,举例（,adjacent_sibling_selector2,）,交集选择器,交集选择器,交集选择器是由两个选择器直接连接构成，结果是二者各自元素范围的交集。,div border-style:solid;,border-width:10px;,border-color:blue;,margin:20px;,div.al border-color:blue;,background:#999999;,.al background:#33ffcc;,交集选择器,举例（,intersection,）,并集选择器,并集选择器,对各个基本选择器所选择的范围同时选中，任何形式的基本选择器都可以作为并集选择器的一个组成部分。,div border-style:solid;,border-width:10px;,border-color:blue;,margin:20px;,h1,h2,div,background:#999999;,并集选择器,并集选择器效果,并集选择器效果,并集选择器效果,应用并集选择器,属性选择器,属性选择器可以根据元素的属性及属性值来选择元素,属性选择器把所需属性列在,方括号,(),中,例：,atitle color:red;,/*,包含标题的所有元素变为红色,*/,举例,ahref color:red;,/*,只对有href属性的a元素应用样式,*/,举例,ahreftitle color:red;,/*,将同时有,href,和,title,属性的,a,设置为红色,*/,举例,ahref=“color:red;,/*,根据具体属性值来选择该元素,*/,举例,ahref=“color:red;,/*,多个属性,-,值选择器链接在一起选择该元素,*/,举例,伪类选择器,在,CSS,中，可以给每一种状态的链接应用样式，只需通过使用叫做伪类选择器的选择器进行设置。,链接伪类,a:link 应用样式到未点击的链接,a:visited 应用样式到已点击的链接,a:hover 当鼠标悬停在链接时应用该样式,a:active 鼠标键按下之后应用该样式,伪类用冒号,:,表示,如果想在同一个样式表中使用全部四个链接伪类，需要以准确的顺序出现：,提示：a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。,提示：a:active 必须被置于 a:hover 之后，才是有效的。,提示：伪类名称对大小写不敏感。,举例,(pseudo_underline),举例,(pseudo_letter-,spacing,),举例,(pseudo_,uppercase,),伪元素选择器,伪类不是唯一的伪选择器，,为了满足排版的需要，,可以,将虚拟元素插入到文档中,伪元素也用冒号:表示,首行,伪元素,:first-line,，,该选择器在特定元素的首行应用样式规则，能应用的属性只有：,color font background word-spacing letter-spacing text-decoration vertical-align text-transform line-height,首字母,伪元素,:first-letter,，,该选择器在特定元素的首字母应用样式规则，能应用的属性只有：,color font text-decoration text-transform vertical-align background margin padding border float word-spacing letter-spacing,举例（,firstline,）,举例（,firstletter,）,伪元素选择器,before,伪元素,:before,伪元素选择器用于在被选元素的内容前面插入内容，必须配合,content,属性来指定要插入的具体内容。其基本语法格式如下：,在上述语法中，被选元素位于“,:before,”之前，“”中的,content,属性用来指定要插入的具体内容，该内容既可以为文本也可以为图片。,举例（,before,）,:before,content:,文字,/url();,伪元素选择器,after,伪元素,:after,伪元素选择器用于在某个元素之后插入一些内容，使用方法与,:before,选择器相同。,举例（,after,）,伪元素选择器,:nth-child(),选择器,:nth-child(),选择器用来匹配属于其父元素的第,N,个子元素，,n,可以是数字、关键字或公式。,这是标题,第一个段落。,第二个段落。,div,中的第一个段落。,div,中的第二个段落。,p:nth-child(2),background:#ff0000;,举例（,child_,nth-child(2),）,伪元素选择器,p:nth-child(,odd,),background:#ff0000;,p:nth-child(,even,),background:#00ff00;,这是标题,第一个段落。,第二个段落。,第三个段落。,第四个段落。,举例（,child_ nth-child(odd&even),）,伪元素选择器,p:nth-of-type(2),background:#ff0000;,这是标题,第一个段落。,第二个段落。,div,中的第一个段落。,div,中的第二个段落。,举例（,nth-of-type,）,继承和层叠,两个重要的概念,在讲述,CSS,样式属性之前，有两个概念很重要,样式属性的元素继承,样式表规则的层叠,继承,继承：,(X,),HTML元素会把某些样式属性传递给它包含的元素文档结构：,(,X,),HTML文档有隐性的结构或层次,html,head,style,title,body,h1,h1,p,p,p,p,em,em,em,img,父与子：包含在指定元素中的所有元素都被称为后代,举例（,inherit_font-weight,）,当使用,p,元素作为选择器编写一个字体相关的样式规则时，规则将应用于文档中所有的段落和这些段落包含的内联文本,与字体相关的属性不能应用于图像,有些样式表属性能继承，有些不行,，比如边框,应用于具体元素的任何属性将覆盖该属性的继承值,html,head,style,title,body,h1,h1,p,p,p,p,em,em,em,img,继承的传递规则,举例（,inherit_border,）,举例（,inherit_font-size,）,层叠,示例内容,1,示例内容,2,示例内容,3,.a1 color:#999999;,.a2,color:#ff00ff;,#myt,color:#0000ff;,究竟是什么样式呢？,CSS允许给同一个文档应用多个样式表，这必将引发冲突,层叠就可以简单理解为“冲突”的解决方案,层次系统给不同的样式表信息源分配不同的权重,层叠涉及当多个样式信息源争夺网页中元素的控制权时如何处理相关问题,层叠,举例（,stackup,）,样式表层级,浏览器默认设置,用户样式设置（在浏览器中作为“读者浏览器”设置）,链接的外部样式表（用,link,元素添加）,导入的样式表（使用,import,功能添加）,文档,样式表（由style元素添加）,内,联,样式表（由开标签中的,style,属,性添加）,越往下优先级越高,选择了可用的样式表，仍然会存在冲突；因此，需要在规则层继续层叠,当同一个样式表中的两个规则冲突时，可根据选择器的类型决定优先级,简单地说，选择器的优先级规则可以表述为：,内联样式,ID,选择器,类选择器,后代选择器,元素选择器,把握一个大的原则：越特殊的样式，优先级越高,优先级特性,举例（,priority-h3,）,举例（,priority-background,）,举例（,priority-color,）,优先级特性,某个元素指定,class,时采用,class=,“,class2 class1,”这种方式指定，此时虽然,class1,在元素中指定时排在,class2,的后面，但因为在样式表文件中,class1,处于,class2,前面，此时仍然是,class2,的优先级更高，,font-size,的属性为,20px,，而非,12px,。,如果要让某个样式的优先级变高，可以使用,!important,来指定。,举例（,priority-important,）,优先级规则相同的顺序,如果,优先级相同,的样式规则发生冲突，则列表中最后出现的,规则起作用,例：,“后来居上”的规则同样适用于CSS中其他的上下文,在声明块中，后面的声明可以覆盖前面的声明,源码中列在后面的外部样式表优先于列在前面的,举例（,cascade,）,p,color:red;,p,color:blue;,p,color:green;,