HTML + CSS 连载 | 11 - CSS 属性的继承和层叠特性

一、CSS 属性的特性-继承性

CSS 的某些属性具有继承性,如果一个 CSS 属性具备继承性,那么在该元素上设置可继承的属性后,他的后代元素都可以继承这个属性,如果后代们元素也设置该属性,那么优先使用后代元素自己的属性值。

常见的文本和字体有关的属性都是可继承属性,如 font-size font-family font-weight line-height color text-align 都具有继承性。

常见的继承属性有:

对于不知道是否具有继承性的元素我们可以通过 MDN 文档来查询,如下所示:

HTML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div.box {
      color: red;
    }
  </style>
</head>
<body>
  <div class="box">
    <h1>我是h1</h1>
    <p>
      我是p
      <span>p的子元素span</span>
      <strong>p的子元素strong</strong>
    </p>
    <span>我是span</span>
  </div>
</body>
</html>

在浏览器中打开该页面,可以看到 color 属性及属性值都被继承了。

但是需要注意的是继承过来的是计算值,而不是设置值。

在遇到倍数相关的属性值设置时,子元素继承的是计算后的值,而不是倍数。

HTML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      color: red;
      /*相对于父元素字体的2倍,body html 默认字体大小是16px*/
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div class="box">
    我是box部分
    <!-- p元素中字体大小会继承 div 元素的字体计算后的值,即32px -->
    <p>我是p元素</p>
  </div>
</body>
</html>

继承 2em 后,实际的大小为 32px,倍数参考的还是父类的参考依据,即 body 元素的默认字体大小 16px。

对于某些不具有继承特性的属性,我们可以在子元素通过设置使该元素具备继承性。

HTML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      color: red;
      border: 2px solid peru;
    }

    /* 强制继承 */
    .box p {
      border: inherit;
    }
  </style>
</head>
<body>
  <div class="box">
    <p>我是p</p>
    <h1>我是h1</h1>
  </div>
</body>
</html>

在浏览器打开页面,border 属性是不具备继承性的,但是通过设置可以强制性的使 border 属性具备继承性。

二、CSS 属性的特性-层叠性

对于一个元素的属性,我们可以通过不同的选择器进行设置的,并且这些属性会被一层一层覆盖上去,最终只有一个生效,哪个选择器设置的样式会生效?

在前面的内容中我们已经举例过关于 CSS 样式的覆盖的例子,同一个元素的同一个属性设置不同的值会被最后一个设置的值覆盖,那么除了先后顺序还有就是跟使用的选择器的权重有关了。

具体有两个判断方式:

  • 方式一:根据选择器的权重,选择器的权重的生效,优先级就高
  • 方式二:根据选择器的先后顺序,权重相同时,后面的选择器的设置就会生效

CSS 属性的权重如下:

  • !important:10000
  • 内联样式:1000
  • id 选择器:100
  • 类选择器属性选择器伪类:10
  • 元素选择器伪元素:1
  • 通配符:0

权重的计算方式如下:

选择器
h1 0 0 0 0
h1 + p::first-line 0 0 0 3
li > a[href+="en-US"] > .inline-warning 0 0 2 2
#info 0 1 0 0
HTML 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div .box {
      color: red !important; /*选择器权重 10000*/
    }

    #main {
      color: orange; /*id选择器权重 100*/
    }

    .box {
      font-size: 10px; /*类选择器 10*/
    }

    .name {
      font-size: 30px;
    }

    * {
      color: aquamarine;
    }
  </style>
</head>
<body>
  <div id="main" class="box name info" style="color: blue;">
    我是box
  </div>
</body>
</html>

浏览器打开 HTML,效果如下:

可以看到最终的效果是根据权重大小生效的。

相关推荐
神仙别闹1 小时前
基于ASP.NET+ SQL Server实现(Web)医院信息管理系统
前端·后端·asp.net
步行cgn5 小时前
Vue 中的数据代理机制
前端·javascript·vue.js
GH小杨5 小时前
JS之Dom模型和Bom模型
前端·javascript·html
星月心城6 小时前
JS深入之从原型到原型链
前端·javascript
你的人类朋友7 小时前
🤔Token 存储方案有哪些
前端·javascript·后端
烛阴7 小时前
从零开始:使用Node.js和Cheerio进行轻量级网页数据提取
前端·javascript·后端
liuyang___7 小时前
日期的数据格式转换
前端·后端·学习·node.js·node
字节逆旅7 小时前
老板说15分钟内把这个样式改好
css
是梦终空8 小时前
Python毕业设计226—基于python+爬虫+html的豆瓣影视数据可视化系统(源代码+数据库+万字论文)
爬虫·python·html·毕业设计·毕业论文·源代码·豆瓣影视数据可视化
贩卖纯净水.8 小时前
webpack其余配置
前端·webpack·node.js