1. CSS继承与权重

1. CSS 继承性

• 就像父亲的财产会遗传给儿子一样，在CSS中祖先元素的样式同样也会被子元素继承。
• 继承是指应用在一个标签上的那些CSS样式会同时被应用到其内嵌标签上。
• 比如为父元素设置了字体颜色，子元素也会应用上相同的颜色。
• 当然并不是所有的样式都会被继承，这一点我们讲到具体样式时，再去讨论。
• css 中可以和不可以继承的属性总结

2. CSS 权重问题

如果一个元素同时满足了多个选择器，哪个样式生效？

样式冲突时,必然只有一个样式生效

在页面中使用CSS选择器选中元素时，经常出现一个元素同时被多个选择器选中。
比如：

• body h1{}

• h1{}

上边的两个选择器都会选择h1元素，如果两个选择器设置的不是同一个样式那还好, 不会产生冲突，但是如果两个选择器设置的是同一个样式，这样h1到底要应用那个样式呢？

CSS中会默认使用权重较大的选择器设置的样式，权重又是如何计算的呢？

• 行内样式 > id 选择器 > class 选择器 >标签选择器

• 复杂选择器权重计算

  • 行内样式 1000
  • id 选择器 100
  • class 选择器 10
  • 标签选择器 1
  • 通配符/继承属性 0

• 如果两个选择器是一样的，后写的生效。

• 如果写了相同的选择器，希望某个选择器权重更高，添加 class 类名，使用交集选择器即可。

.header .nav .nav-item {
    color: red;
}
.header .nav .nav-item.active {
    color: blue;
}