项目一任务四 制作“京剧”页面

非遗文化长廊制作“京剧”页面CONTENTS目录复合选择器第一部分关系选择器第二部分结构化伪类选择器第三部分CONTENTS目录链接伪类选择器第四部分伪元素选择器第五部分复合选择器第一部分复合选择器在Web开发世界里，HTML5作为基石，不仅定义了网页的结构与内容，还通过强大的样式定义机制——CSS（层叠样式表），为网页赋予了生命与灵魂。复合选择器就像是一把钥匙，解锁了Web设计的无限创意与可能。复合选择器是由两个或多个基础选择器通过不同的方式组合而成的，具体形式如下。复合选择器交集选择器并集选择器后代选择器复合选择器是由两个或多个基础选择器通过不同的方式组合而成的，具体形式如下。复合选择器1.交集选择器交集选择器是由两个基础选择器直接连接构成，表示选中二者各自元素范围的交集。其中第1个必须是标记选择器，第2个必须是类选择器或者ID选择器。二者之间不能有空格，要连续书写。复合选择器1.交集选择器p.special{/*交集选择器*/

font-size:larger;

color:red;

}...<pclass="special">它起源。。。意义。‌</p>使用交集选择器p.special定义的样式应用于<pclass="special">标记的页面效果。复合选择器2.并集选择器并集选择器由多个基础选择器通过逗号（英文状态）连接而成，表示同时选中各个基础选择器所选择的范围。任何形式的选择器（包括标记选择器、类选择器、ID选择器等）都可以作为并集选择器的一部分。复合选择器2.并集选择器h1,h2,h3,h4,p{/*不同标记组成的并集选择器*/

color:purple;

font-size:larger;

}h2.special,.special,#one{/*多种类型选择器组成的并集选择器*/

color:red;

text-decoration:underline;

}使用并集选择器定义的样式应用于页面效果。复合选择器3.后代选择器后代选择器，也可以称为包含选择器，是一种由多个空格分隔的选择器，表示第一个元素的所有后代中符合第二个选择器条件的元素。复合选择器3.后代选择器h3strong{/*后代选择器*/

color:red;

}pem{/*后代选择器*/

color:plum;

}.insideins{/*后代选择器*/

color:blue;

}在h3标记中嵌套定义了strong标记，在p标记中嵌套定义了em标记，在.inside类选择器中嵌套定义了ins标记页面效果。复合选择器3.后代选择器使用后代选择器，在选择器发生嵌套时，显示效果只对选择器内的文本产生效果，而对其外的选择器不产生任何效果。关系选择器第二部分关系选择器关系选择器与复合选择器类似，但是关系选择器可以更精确地控制元素样式。CSS3的关系选择器主要包括子元素选择器和兄弟选择器，其中子元素选择器由符号“>”连接，兄弟选择器由符号“+”和“~”连接。关系选择器1.子元素选择器子元素选择器使用“>”来选择某个元素的第一级子元素。例如，希望选择只作为h3标记子元素的strong标记，可以这样写：h3>strong。关系选择器1.子元素选择器p>strong{/*子元素选择器*/

font-weight:bold;

color:red;

}关系选择器1.子元素选择器元素按照后代关系排列，可以分为第一级子元素、第二级子元素等。也可以有父元素、子元素、孙元素等名称。关系选择器2.相邻兄弟选择器相邻兄弟选择器使用“+”来连接前后两个选择器。选择器中的两个元素有同一个父元素，而且第2个元素必须紧跟第1个元素。关系选择器2.相邻兄弟选择器h3+p{/*相邻兄弟选择器*/

color:green;

font-family:"微软雅黑";

font-size:20px;

}h3元素后紧邻的第1个兄弟元素文字内容将以定义好的样式显示。关系选择器3.相邻兄弟组选择器相邻兄弟组选择器使用“~”来连接前后两个选择器。选择器中的两个元素要有同一个父元素，但是第2个元素不必紧邻第1个元素。关系选择器3.相邻兄弟组选择器h3~p{

color:green;

font-family:"微软雅黑";

font-size:20px;

}h3元素之后的两个p元素文本均应用了代码中设定的样式。结构化伪类选择器第三部分结构化伪类选择器结构化伪类选择器允许开发者根据文档结构来指定元素的样式。在CSS3中增加了许多新的结构化伪类选择器，方便开发人员精准地控制元素样式。通常把具有共性的一些常用的结构信息提取出来作为伪类。结构化伪类选择器“伪类”的意思是不需要重新定义的类。结构化伪类选择器如表1-4-1所示。选择器功能描述E:first-child作为父元素的第一个元素的元素E，与E:nth-child(1)等同E:last-child作为父元素的最后一个元素的元素E，与E:nth-last-child(1)等同E:root选择匹配元素E所在文档的根元素。在HTML文件中，根元素始终是html，此时该选择器与HTML类型选择器匹配的内容相同表1-4-1

结构化伪类选择器结构化伪类选择器E:nth-child(n)作为父元素的第n个子元素的元素E。其中n可以是整数（1,2,3）、关键字（even，odd）、公式（2n+1），而且n的起始值为1，而不是0E:nth-last-child(n)作为父元素的倒数第n个子元素的元素E。此选择器与E:nth-child(n)选择器的计算顺序刚好相反，但使用方法都是一样的。其中nth-last-child(1)始终匹配最后一个元素，与last-child等同E:nth-of-type(n)作为父元素的第n个具有指定类型的元素E结构化伪类选择器E:nth-last-of-type(n)作为父元素的倒数第n个具有指定类型的元素EE:first-of-type作为父元素的第1个具有指定类型的元素E，与E:nth-of-type(1)等同E:last-of-type作为父元素的最后1个具有指定类型的元素E，与E:nth-last-of-type(1)等同结构化伪类选择器E:only-child选择父元素只包含一个子元素且与子元素相匹配的元素EE:only-of-child选择父元素只包含一个同类型子元素且与该子元素相匹配的元素EE:empty选择没有子元素且不包含任何文本节点的元素E结构化伪类选择器链接伪类选择器第四部分链接伪类选择器在定义超链接时，开发人员可以为超链接设定不同的状态，使得超链接在鼠标单击前后和指针悬停时具有各自的样式，以此来提升体验效果。链接伪类选择器在CSS中，通过链接伪类可以实现不同的链接状态。与超链接相关的4个伪类定义了不同的超链接状态，如表1-4-2所示。超链接标记<a>的伪类功能描述a:link{CSS样式规则;}超链接的默认样式a:visited{CSS样式规则;}超链接被访问过之后的样式a:hover{CSS样式规则;}鼠标指针经过、悬停时超链接的样式a:active{CSS样式规则;}鼠标点击不放时超链接的样式表1-4-2

超链接标记<a>的伪类链接伪类选择器链接伪类选择器使用链接伪类选择器的注意事项1.在使用伪类链接定义超链接样式时，通常要按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能会不起作用。2.超链接的4种伪类状态并非全部定义，一般只需要设置3种状态即可，如link、hover和active。如果只设定两种状态，即用link、hover来定义。3.除了文本样式之外，链接伪类通常还用于控制超链接的背景、边框等样式。伪元素选择器第五部分伪元素选择器伪元素选择器，是针对CSS中已经定义好的伪元素使用的选择器。伪元素选择器用来选择HTML标记中的特定部分，而不是整个标记里面的内容。它通常用于处理那些不是由HTML标记直接表示的内容，比如首行文字、首字母或者生成的内容等。伪元素选择器常见的伪元素选择器如表1-4-3所示。选择器功能描述::first-letter选中某（块级元素）第一行的第一个字母，并且文字所处的行之前没有其他内容::first-line在某（块级元素）的第一行应用样式::selection