Web前端开发 课件 第7章 CSS选择器

第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子标签。p>h2子选择器表示选择嵌套在p标签的子标签h2。p+h2相邻兄弟选择器表示选择p标签后紧邻的第一个兄弟标签h2。p~h2普通兄弟选择器表示选择p标签所有的h2兄弟标签。

7.4关系选择器ph2（后代选择器）表示选择p标签的所有h2子标签。

7.4关系选择器p>h2（子代选择器）表示选择嵌套在p标签的子标签h2。

7.4关系选择器p+h2（相邻兄弟选择器）表示选择p标签后紧邻的第一个兄弟标签h2。

7.4关系选择器p~h2（普通兄弟选择器）表示选择p标签所有的h2兄弟标签。

7.5伪类选择器CSS伪类是用来添加—些选择器的特殊效果。由于状态的变化是非静态的，所以元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。伪类功能和class类似，但它是基于文档之外的抽象，所以叫伪类。伪类用冒号

:

表示，伪类名称对大小写不敏感。

7.5伪类选择器a标签的四种伪类选择器顺序为：a:link,a:visited,a:hover,a:active​。必须严格按照此规则来设置属性，否则效果无效。:link未访问的超链接:visited已访问过的超链接:active鼠标移动到超链接上:hover选定的超链接:focus元素获取焦点

7.5伪类选择器目标伪类选择器（:target），用于为页面中的某个target元素（该元素的id被当做页面中的超链接来使用）指定样式。只有用户单击了页面中的超链接，并且跳转到target元素后，该选择器所设置的样式才会起作用。

7.5伪类选择器第1类:root元素所在文档的根元素

:not选择某个元素之外的所有元素:empty选择没有子元素的元素，且该元素也不包含任何文本节点第2类:fisrt-child:last-child父元素的第一个子元素父元素的最后一个子元素:nth-child(n):nth-last-child(n)：父元素的第n个子元素父元素的倒数第n个子元素:only-child父元素的唯一子元素的元素第3类:nth-of-type(n):nth-last-of-type(n)父元素内具有指定类型的第n个元素父元素内具有指定类型的倒数第n个元素:first-of-type:last-of-type父元素内具有指定类型的第一个元素父元素内具有指定类型的最后一个元素

7.5伪类选择器:root选择器用于匹配文档根标签，在HTML中，根标签始终是html。

7.5伪类选择器如果对某个结构标签使用样式，但是想排除这个结构元素下面的子结构元素，让子结构元素不使用这个样式，可以使用:not选择器。

7.5伪类选择器:empty选择没有子元素的元素，且该元素也不包含任何文本节点。

7.5伪类选择器:first-child选择器和:last-child选择器分别用于选择父元素中的第一个和最后一个子元素。

7.5伪类选择器:nth-child(n)和:nth-last-child(n)选择器是:first-child选择器和:last-child选择器的扩展。

7.5伪类选择器nth-of-type(n)和:nth-last-of-type(n)选择器用于匹配属于父元素的特定类型的第n个子元素和倒数第n个子元素。选中父元素指定类型p的第2个元素选中父元素的第2个元素

7.6伪元素选择器:before伪元素选择器可以在被选元素的内容前面插入内容，必须配合content属性来指定要插入的具体内容。<元素>:before{ content:文字/url();}注意：被选元素