乐趣区

关于css:CSS-三大特性-层叠性继承性优先级

jiezi

1、层叠性

雷同选择器给元素设置雷同的款式，此时一个款式会 笼罩（层叠）另一个抵触的款式。层叠性次要解决款式抵触问题。

<style>
  div {
    color: red;
    font-size: 18px;
  }
  ...
  div {color: green;    /* 和上方的红色抵触 */}
</style>

最终文字色彩显示为绿色。层叠性遵循的准则是 就近准则，也就是哪个离构造近，哪个款式就会失效。（简略说后写的款式会笼罩后面写的）

在笼罩款式时，不抵触的属性不会被笼罩，比方下面的代码，最终 div 的字体大小仍为 18px。

2、继承性

在 CSS 中，子标签会继承父标签的某些款式，如文本色彩和字号。失当地应用继承能够简化代码，升高 CSS 款式的复杂性。

<style>
  body {
    font-size: 18px;
    line-height: 24px;
  }
  div {font-size: 14px;}
</style>

<body>
  <!-- div 继承了 body 的行高 -->
  <div> 我的字体大小为 14px，行高为 24px </div>
  <!-- p 继承了 body 的字号和行高 -->
  <p> 我的字体大小为 18px，行高为 24px </p>
</body>

子元素能够继承的款式：text-，font-，line- 结尾的属性，以及 color 属性

在继承性中，有一个特地的属性 —— line-height。
body {font: 12px/1.5 Microsoft YaHei;}
div {font-size: 16px;}
p {
  font-size: 14px;
  color: grey;
}

行高能够设置为具体的值，比方 18px，也能够不跟单位，比方 1.5，意思是行高为字体大小的 1.5 倍。下面 body 的行高为 12 * 1.5 = 18px。

如果子元素没有设置行高，则会继承父元素的行高。下面代码中，<div> 的行高为 16 1.5 = 24px，<p> 的行高为 14 1.5 = 21px。

body 行高 1.5 这样的写法能够让子元素依据本人文字的大小调整行高。

3、优先级

选择器 选择器权重
继承 或者 * 通配符选择器 0,0,0,0
元素选择器 0,0,0,1
类选择器，伪类选择器 0,0,1,0
ID 选择器 0,1,0,0
行内款式 style=”” 1,0,0,0
!important ∞ 无穷大

留神：

  1. 权重由 4 组数字组成，然而不会有进位
  2. 等级判断从左向右比拟，如果某一位数值雷同，则判断下一位
  3. 继承的权重是 0，如果该元素没有被间接选中，不论父元素权重多高，子元素失去的权重都是 0 
<style>
  /* .top 是类选择器，权重 0,0,1,0 */
  .top {color: red;}
  /* p 是元素选择器，权重 0,0,0,1 */
  p {color: yellow;}
</style>
<div class="top">
  <p> 猜猜我是什么色彩？</p>  <!-- 我是黄色哦 -->
</div>

尽管 .top 的权重大于 p，但对 p 来说，.top 是继承自父元素的，其权重理论为 0,0,0,0

如果是复合选择器，则会有 权重叠加，须要计算权重。
  • div ul li ———> 0,0,0,3
  • .nav ul li ———> 0,0,1,2
  • a:hover ———> 0,0,1,1
  • .nav a ———> 0,0,1,1

因为权重不会有进位，并且等级从左向右比拟，所以 0,0,0,12 的权重仍旧低于 0,0,1,0

退出移动版