《Web前端开发基础》课件——视频2 复合选择器.pptxVIP

CSS基础

--复合选择器

01三种基本选择器优先级交集选择器02并集选择器03目录

1基本选择器的优先级htmlhead??title层叠特性/title/headstyletype=text/css??p{????color:green;??}

??.red{????color:red;??}

??.black{????color:black;??}

??#line3{????color:blue;??}/stylebody??p这是第1行文本/p??pclass=red这是第2行文本/p??pid=line3class=red这是第3行文本/p??pstyle=color:orange;id=line3这是第4行文本/p??pclass=blackred这是第5行文本/p/body/html这5行的文字显示什么颜色呢？

1基本选择器的优先级你做对了吗？为什么会这样呢？

1基本选择器的优先级这其实是color属性冲突的问题。也正是我们之前给大家讲到的“层叠”概念。怎么理解呢？CSS样式在针对同一元素配置同一属性时，会依据层叠规则（权重）来处理冲突，即会选择应用权重高的CSS选择器所指定的属性，这一操作一般也被描述为权重高的覆盖权重低的，因此称其为“层叠”。

1基本选择器的优先级CSS样式的优先级优先级关系：行内样式内嵌样式链接样式100010010行内样式ID选择器类选择器10标记选择器通配符子选择器相邻选择器继承样式复合选择器权重为基础选择器权重的叠加

1基本选择器的优先级没有冲突，标记选择器对其生效标记选择器与类选择器，标记选择器权重1，类选择器权重10。所以以类选择器的颜色为准，显示为红色标记选择器权重1，类选择器权重10，ID选择器权重是100。所以以ID选择器的颜色为准，显示为蓝色行内样式权重1000，标记选择器权重1，ID选择器权重100。所以以行内样式的颜色为准，显示为橙色标记选择器权重1，类选择器权重100。所以以类选择器为准，但类选择器同时选择了两个，依据定义的顺序，以最近的顺序为准，则显示为黑色大的原则：越特殊的样式，其优先级越高。行内样式仅对指定的一个元素产生影响，因此它非常特殊；使用类选择器的某种元素，一定是所有该种元素中的一部分，因此它一定比标记样式特殊；ID选择器是针对某一个元素的，因此它一定应用于多个元素的类选择器特殊。技巧:

复合选择器是由三种基本选择器通过不同的组成构成的，可实现更强、更方便的选择功能。接下来介绍交集选择器、并集选择器。2交集选择器

2交集选择器（1）定义：由两个基本选择器直接链接构成，其结果是选中二者各自元素范围的交集。其中第1个必须是标记选择器，第2个必须是类别选择器或ID选择器。（2）作用：交集选择器将选中同时满足前后两个选择器定义的元素。

2交集选择器h3.special{属性:属性值;属性:属性值;………}（3）语法格式：h3#id{属性:属性值;属性:属性值;………}h3#idh3#idh3.specialh3.special

2交集选择器（4）代码示例：html

head

??title交集选择器/title

??styletype=text/css

????p{

????color:blue;

????}

????.good{

????color:green;

????}

????p.good{

?????color:red;

?????font-weight:bold;

????}

??/style

/head

body

??p我是蓝色/p

??h6我就是h6标签，没有用样式/h6

??pclass=good我用了标记选择器和类选择器，那我是红色加粗吗？/p

??h6class=good我是h6标签，用的类选择器是绿色/h6

/body

/html

3并集选择器（1）定义：任何形式的选择器都可以作为并集选择的一部分。（2）作用：并集选择器是同时选中各个基本选择器所选择的范围。

3并集选择器（3）语法格式：选择器1,选择器2{属性:属性值;属性:属性值;………}

3并集选择器html

head

??title并集选择器/title

??styletype=text/css

????.good{

????color:green;

????}

????h1,h2,