CSS样式的继承性和优先级

本文主要内容

  • CSS的继承性

  • CSS的层叠性
    计算权值
    权值问题大总结
    CSS样式表的冲突的总结

  • 权值问题深入
    同一个标签,携带了多个类名

1.CSS继承性





继承性练习



我是段落1

我是段落2

我是段落3

效果图如下
CSS样式的继承性和优先级_第1张图片
上方代码中,我们给div标签增加字体红色属性,却发现,div里的每一个子标签

也增加了红色属性。于是我们得到这样的结论:

有一些属性,当给自己设置的时候,自己的后代都继承上了,这个就是继承性。

继承性是从自己开始,直到最小的元素。

****




继承性练习



我是段落1

我是段落2

我是段落3

效果图如下
CSS样式的继承性和优先级_第2张图片
上图中,我们给div加了一个border,但是发现只有div具备了border属性,而p标签却没有border属性。于是我们可以得出结论:

关于文字样式的属性,都具有继承性。这些属性包括:color、 text-开头的、line-开头的、font-开头的。

关于盒子、定位、布局的属性,都不能继承。

以后当我们谈到css有哪些特性的时候,我们要首先想到继承性。而且,要知道哪些属性具有继承性、哪些属性没有继承性。

2.层叠性(计算权值)
下面我就会通过一些实际的例子说明什么是层叠性
例1.





继承性练习



猜猜我是什么颜色吧!

注意观察查看查看器右边的元素
CSS样式的继承性和优先级_第3张图片
上图中,三种选择器同时给P标签增加颜色的属性,但是,文字最终显示的是粉色,这个时候,就出现了层叠性的情况。
当多个选择器,选择上了某个元素的时候,要按照如下顺序统计权重:
id的数量,类的数量,标签的数量
因为对于相同方式的样式表,其选择器排序的优先级为:ID选择器 > 类选择器 > 标签选择器
给出以下规则

  1. 内联样式优先级1000
  2. id选择器优先级100
  3. 类和伪类优先级10
  4. 元素选择器优先级1
  5. 通配符优先级0
  6. 继承的样式没有优先级
    针对上面规则,我们接下来举一些复杂一点的例子:are you ready?go
    1.计算权值




继承性练习



猜猜我是什么颜色吧!

效果图如下

一定要注意查看器右边!!!自己看
CSS样式的继承性和优先级_第4张图片
2.权值相同时呢?





继承性练习



猜猜我是什么颜色吧!

从下图可以看到,第一个样式和第二个样式的权值相同。但第二个样式的书写顺序靠后,因此以第二个样式为准(就近原则)。

CSS样式的继承性和优先级_第5张图片
3.要想实现下列效果应怎么设计css
CSS样式的继承性和优先级_第6张图片
具有实战意义哟,如果是让第二个变成红色呢,请自己思考完成





继承性练习



4.若没有选择元素呢?





继承性练习



猜猜我是什么颜色

通过下图显示的结果可以看出如果没有选中元素的话就依据就近原则

CSS样式的继承性和优先级_第7张图片
5.总结如下
CSS样式的继承性和优先级_第8张图片

6.下面做几个例题加强一下,先自己思考结果
1.





继承性练习



我是什么颜色

我是什么颜色





继承性练习



我是什么颜色




继承性练习



我是什么颜色

第一题是蓝色,第二题是红色,第三题是红色

你可能感兴趣的:(CSS)