CSS样式表的继承性和层叠性重要

举报
龙哥手记 发表于 2023/01/29 22:06:16 2023/01/29
【摘要】 《前端基础 第二十篇》

本文重点

  • CSS的继承性
  • CSS的层叠性
    • 计算权重
    • 权重问题大总结
    • CSS样式表的冲突的总结
  • 权重问题深入
    • 同一个标签,携带了多个类名
    • !important标记

CSS的继承性

我们来看下面这样的代码,来引入继承性:

上方代码中,我们给div标签增加红色属性,却发现,div里的每一个子标签<p>也增加了红色属性。于是我们得到这样的结论:

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

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

但是呢,如果再给上方的代码加一条属性:

上图中,我们给div加了一个border,但是发现只有div具备了border属性,而p标签却没有border属性。于是我们可以得出结论:

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

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

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

CSS的层叠性

很多公司如果要笔试,那么一定会考层叠性。

层叠性:计算权重

层叠性:就是css处理冲突的能力。 所有的权重计算,没有任何兼容问题!

CSS像艺术家一样优雅,像工程师一样严谨。

我们来看一个例子,就知道什么叫层叠性了。

上图中,三种选择器同时给P标签增加颜色的属性,但是,文字最终显示的是蓝色,这个时候,就出现了层叠性的情况。

当多个选择器,选择上了某个元素的时候,要按照如下顺序统计权重:

  • id 选择器
  • 类选择器、属性选择器、伪类选择器
  • 标签选择器、伪元素选择器

因为对于相同方式的样式表,其选择器排序的优先级为:ID选择器 > 类选择器 > 标签选择器

针对上面这句话,我们接下来举一些复杂一点的例子。

层叠性举例

举例1:计算权重

如上图所示,统计各个选择器的数量,优先级高的胜出。文字的颜色为红色。

PS:不进位,实际上能进位(奇淫知识点:255个标签,等于1个类名)但是没有实战意义!

举例2:权重相同时

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

举例3:具有实战性的例子

现在我要让一个列表实现上面的这种样式:第一个li为红色,剩下的li全部为蓝色。

如果写成下面这种代码是无法实现的:

无法实现的原因很简单,计算一下三个选择器的权重就清楚了,显然第二个样式被第一个样式表覆盖了。

正确的做法是:(非常重要

上图中,第二个样式比第一个样式的权重要大。因此在实战中可以实现这种效果:所有人当中,让某一个人为红,让其他所有人为蓝。

这种方式好用是好用,但用好很难。

就拿上方代码来举例,为了达到这种效果,即为了防止权重不够,比较稳妥的做法是:把第二个样式表照着第一个样式表来写,在此基础上,给第二个样式表再加一个权重。

上面这个例子很具有实战性。

举例4:继承性造成的影响

这里需要声明一点:

如果不能直接选中某个元素,通过继承性影响的话,那么权重是0。

为了验证上面这句话,我们来看看下面这样的例子:

另外:如果大家的权重相同,那么就采用就近原则:谁描述的近,听谁的。举例如下:(box3 描述得最近,所以采用 box3 的属性)

上方代码的文字版如下:

<!DOCTYPE html>
<html lang="">
  <head>
    <meta />
    <meta />
    <meta />
    <title>Document</title>
    <style>
      #box1 {
        color: red;
      }

      #box2 {
        color: green;
      }

      #box3 {
        color: blue;
      }
    </style>
  </head>
  <body>
    <div id="box1">
      <div id="box2">
        <div id="box3"><p>猜猜我是什么颜色</p></div>
      </div>
    </div>
  </body>
</html>

层叠性:权重计算的问题大总结(非常重要)

层叠性。层叠性是一种能力,就是处理冲突的能力。当不同选择器,对一个标签的同一个样式,有不同的值,听谁的?这就是冲突。css有着严格的处理冲突的机制。

通过列举上面几个例子,我们对权重问题做一个总结。

上面这个图非常重要,我们针对这个图做一个文字描述:

  • 选择上了,数权重,(id的数量,类的数量,标签的数量)。如果权重一样,谁写在后面听谁的。
  • 没有选择上,通过继承影响的,就近原则,谁描述的近听谁的。如果描述的一样近,比如选择器权重,如果权重再一样重,谁写在后面听谁的。

CSS样式表的冲突的总结

  • 1、对于相同的选择器(比如同样都是类选择器),其样式表排序:行级样式 > 内嵌样式表 > 外部样式表(就近原则)
  • 2、对于相同类型的样式表(比如同样都是内部样式表),其选择器排序:ID选择器 > 类选择器 > 标签选择器
  • 3、外部样式表的ID选择器 > 内嵌样式表的标签选择器

总结:就近原则。ID选择器优先级最大。

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。