第7章CSS选择器主讲教师：朱铁樱《Web前端开发》
思维导图
7.1基础选择器标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。语法格式：标签名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}CSS基础选择器有标签选择器、类选择器、ID选择器和通配符选择器。
7.1基础选择器类选择器使用“.”（英文点号）进行标识，后面紧跟类名。语法格式：.类名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}?
7.1基础选择器id选择器使用“#”进行标识，后面紧跟id名。#id名{属性1:属性值1;属性2:属性值2;属性3:属性值3;}语法格式：?
7.1基础选择器通配符选择器用“*”号表示，它是所有选择器中作用范围最广的，能匹配页面中所有的元素。*{属性1:属性值1;属性2:属性值2;属性3:属性值3;}语法格式：
作业1：静夜思需求说明：使用内嵌式引入CSS样式表。分别用标签选择器、ID选择器和类选择器实现以下效果，属性及属性值可以更换。
交集选择器又称标签指定式选择器，由两个选择器构成，其中第一个为标签选择器，第二个为类选择器或id选择器，两个选择器之间不能有空格，如p#cpp或p.italic。7.2复合选择器交集选择器CSS复合选择器包括交集选择器、并集选择器和后代选择器。
7.2复合选择器后代选择器用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。后代选择器
7.2复合选择器并集选择器是各个选择器通过逗号连接而成的，任何形式的选择器都可以作为并集选择器的一部分。若某些选择器定义的样式完全或部分相同，可利用并集选择器为它们定义相同的样式。并集选择器
作业2—完成实验项目任务单制作团队风采页面需求说明图片和文本放在段落标签中，标题放在p标签的子标签strong标签中段落标签中的文本字体大小为14px；标题字体大小为18px，第一个标题字体颜色为红色，第二个标题字体颜色为绿色CSS样式体现出复合选择器的应用使用链接方式引用外部样式表
思维导图
7.3属性选择器属性选择器功能描述E[att]选择匹配具有属性att的E元素E[att=val]选择匹配具有属性att的E元素,并且属性值为val（其中val区分大小写）E[att^=val]选择匹配元素E，且E元素定义了属性att，其属性值是以val开头的任意字符串E[att$=val]选择匹配元素E，且E元素定义了属性att，其属性值是以val结尾的任意字符串E[att*=val]选择匹配元素E，且E元素定义了属性att，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配
7.3属性选择器E[att]：选择匹配具有属性att的E元素
7.3属性选择器E[att=val]：选择匹配具有属性att的E元素,并且属性值为val（区分大小写）
7.3属性选择器E[att^=val]：选择匹配元素E，且E元素定义了属性att，其属性值以val开头的任意字符串
7.3属性选择器E[att$=val]：选择匹配元素E，且E元素定义了属性att，其属性值以val结尾的任意字符串
7.3属性选择器E[att*=val]：选择匹配元素E，且E元素定义了属性att，其属性值包含了“val”
7.4关系选择器选择器类型功能描述ph2后代选择器表示选择p标签的所有h2子标签。ph2子选择器表示选择嵌套在p标签的子标签h2。p+h2相邻兄弟选择器表示选择p标签后紧邻的第一个兄弟标签h2。p~h2普通兄弟选择器表示选择p标签所有的h2兄弟标签。
7.4关系选择器ph2（后代选择器）表示选择p标签的所有h2子标签。
7.4关系选择器ph2（子代选择器）表示选择嵌套在p标签的子标签h2。
7.4关系选择器p+h2（相邻兄弟选择器）表示选择p标签后紧邻的第一个兄弟标签h2。
7.4关系选择器p~h2（普通兄弟选择器）表示选择p标签所有的h2兄弟标签。
7.5伪类选择器CSS伪类是用来添加—些选择器的特殊效果。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。伪类功能和class类似，但它是基于文档之外的抽象，所以叫伪类。伪类用冒号:表示，伪类名称对大小写不敏感。
7.5伪类选择器