CSS课件CSS复合选择器

CSS的字体样式属性用于定义文本的字体、大小、风格等。前言学习目标理解包含选择器、子选择器、相邻选择器的定义及掌握它们的语法规则；理解属性选择器中几种形式的含义及掌握其语法规则；能利用集中复合选择器多样化美化页面元素。包含选择器包含选择器中前后两部分之间以空格隔开，根据左侧选择符指定的祖先元素，然后在该元素下寻找匹配右侧的选择侧符的下级元素，定义包含选择器时，必须保证在HTML结构中第一个对象能够包含第二个对象，即HTML代码中的标签父辈元素包含子孙辈元素时，则设置相应的样式就有效。盐城师范学院信息工程学院包含选择器盐城师范学院信息工程学院子选择器子选择器中前后部分之间用一个大于号隔开，前后两部分选择符在结构上属于父子关系。如果从右向左读，选择器h1>strong可以解释为“选择作为h1元素子元素的所有strong元素”。盐城师范学院信息工程学院子选择器子选择器是根据左侧选择符指定的父元素，然后在该父元素下寻找匹配右侧选择符的子元素，只有父子关系才可受其CSS控制，祖父与孙子级别的元素则不受控制。盐城师范学院信息工程学院相邻选择器相邻选择器前后部分之间用一个加号（+）隔开，前后两部分选择符在结构上属于同级关系。是根据左侧选择符指定相邻元素，然后该相邻元素后面寻找匹配右侧选择符的相邻元素。盐城师范学院信息工程学院属性选择器属性选择器是选择器的最高级形态，也是选择器发展的总趋势。

属性选择器的形式有多种，不同形式的属性选择器能够实现特定的匹配模式，这种匹配模式与JavaScript等脚本语言的正则表达式功能比较类似。盐城师范学院信息工程学院属性选择器匹配模式是正则表达式中的一个基本概念，它实际上是一个数学公式，用来模拟一类信息，正如工厂中的模具，设计好一个匹配模式，就等于制作一个模具，接着通过模具制作更多的同类产品。盐城师范学院信息工程学院属性选择器如果希望为所有包含href属性的超链接定义背景色，则用如下方法定义：CSS：a[href]{background:#123456;}HTML:<h2>[attr]</h2><p><aname="anchor">存在属性href才行</a><p><ahref="#">存在属性href才行</a>匹配属性属性选择器如果希望想为表单元素类型为type且值为text的元素设置背景色，则用如下方法定义：匹配属性值CSS：input[type=text]{background:#123456;}HTML：<h2>[attr]</h2><form><inputtype="text">属性值为text才行</input><br/><inputtype="textarea">属性值为text才行</input></form>属性选择器如果希望类别选择器中的值包含字母first，若class值内有多个值，各个值之间用空格间隔，值中包括first设置背景色，则用如下方法定义：匹配空白CSS：[class~=first]{background:#030;}HTML：<h2>[attr~="value"]</h2><ul><liclass="first">属性中存在或者含有first.需要空格分隔</li><liclass="second">属性中存在或者含有first.需要空格分隔</li><liclass="third">属性中存在或者含有first.需要空格分隔</li><liclass="firstsecond">属性中存在或者含有first.需要空格分隔</li><liclass="firstthird">属性中存在或者含有first.需要空格分隔</li><liclass="secondthird">属性中存在或者含有first.需要空格分隔</li><liclass="firstsecondthird">属性中存在或者含有first.需要空格分隔</li></ul>匹配连字符属性选择器与匹配空白一样，不同的是类别选择器中的值存在first值，若class值内有多个值，各个值之间用连字符间隔设置背景色，则用如下方法定义：CSS：[class|="first"]{ background:#030;}HTML：<h2>[attr|="value"]</h2><ul><liclass=“first”>属性中存在或者含有first.需要连字符分隔</li><liclass="second">属性中存在或者含有first.需要连字符分隔</li><liclass="third">属性中存在或者含有first.需要连字符分隔</li><liclass="first-second">属性中存在或者含有first.需要连字符分隔</li><liclass="first-third">属性中存在或者含有first.需要连字符分隔</li><liclass="second-third">属性中存在或者含有first.需要连字符分隔</li><liclass="first-second-third">属性中存在或者含有first.需要连字符分隔</li></ul>属性选择器如果希望段落提示属性title的值以good开头设置背景色，则用如下方法定义：匹配前缀CSS：[title^="good"]{ background:#030;}HTML：<h2>[attr^="value"]</h2><ptitle="hello">属性的开头必须是good</p><ptitle="goodmor">属性的开头必须是good</p><ptitle="Tgoodmor">属性的开头必须是good</p>匹配后缀属性选择器如果希望段落提示属性title的值以bye结尾设置背景色，则用如下方法定义：匹配后缀CSS：[title$="bye"]{ background:#030;}HTML：<h2>[attr$="value"]</h2><ptitle="hello">属性的结尾必须是bye</p><ptitle="goodbye">属性的结尾必须是bye</p><ptitle="goodbye-2">属性的结尾必须是bye</p>属性选择器只要属性值包含指定的字符串，都可以定义样式，而不再受制于匹配的位置和属性值的格式。如:匹配子字符串CSS：<styletype="text/css">[title*="bok"]{ background:#030;}</style>HTML：<h2>[attr*="value"]</h2><ptitle="hello">属性中含有bok吗</p><ptitle="bok">属性中含有bok吗</p><ptitle="googbok">属性中含有bok吗</p>集体声明集体声明，在定义CSS属性样式时有些选择器的定义的属性完全一致或部分一致，通过集体声明将其一致的CSS属性放在一起，接着通过将这些选择器用逗号连接减少代码的书写量。h1,h2,h3,h4,h5,h6{ background