继承
定义：子类元素继承父类的样式。
特性
- 给父元素设置一些属性，所有的子元素都可以继承
- 并不是所有的属性都可以继承，只有以color、font-、text-、line-开头的属性才可以继承
- a标签的
字体颜色和下划线是不能继承的 h标签的文字大小是不能继承的
特例：
<style>
.fonts {
font-size: 20px;
}
</style>
<div class="fonts">
<p id="p">我的字体大小为20px</p>
<h1 id="h1">我的字体大小为40px</h1>
</div>
给p和h1标签的父元素div设一个font-size为20px，p继承了div的20px。
但h1却变为了40px，为啥会出现这种情况呢？因为h1的默认样式为2em（32px）。
解决办法：
<style>
.fonts {
font-size: 20px;
}
h1 {
font-size: 100%;
}
</style>
<div class="fonts">
<p id="p">我的字体大小为20px</p>
<h1 id="h1">我的字体大小为20px</h1>
</div>
优先级
优先级顺序：
!important > 行内样式 > id选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
css有哪些选择器
- id选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。
#a {
color:red
}
<p id="a">您好</p>
- 类选择器
在 CSS 中，类选择器以一个点号显示.
.a {
color:red
}
<p class="a">你好 </p>
- 派生选择器
通过依据元素在其位置的上下文关系来定义样式，你可以使标记更加简洁。
li strong {
font-style: italic;
font-weight: normal;
}
<ol><li><strong>您好</strong></li></ol>
- 属性选择器
带有指定属性的 HTML 元素设置样式
[title]{
color:red
}
// 属性和值选择器
[title=school]{
color:red
}
- 元素选择器
html {
color:red
}
h1 {
color:red
}
- 通配符选择器
* {
color:red
}
- 组合选择器
h1 h2 div {
color:red
}
- 伪类
- 伪元素
先看选择器是否命中对应的标签，命中后再根据权重来进行判断，权重的意思是数标签的数量，通过比较ID 类 标签 这三种选择器的数量来决定谁的优先级最高。当数量相同时，通过层叠（后者覆盖前者）来决定。
-
伪类和伪元素的区别
- 可以使用多个伪类，但是只能使用一个伪元素
- 伪元素使用双冒号(::),伪类使用单冒号(:)
- 伪元素的操作对象是新生成的dom元素，而不是原来dom结构里就存在的
- 伪类的操作对象是原来的dom结构里就存在的元素。
层叠
定义：层叠是css的一个特性，如果两个相同的属性作用于同一标签，它们会发生层叠。如果多个复合选择器，同时作用于我们的同一标签，优先级就不好计算了，就要计算权重，通过比较权重，来先出优先级最高的选择器。
如何计算权重：
权重计算规则
- 第一优先级：!important会覆盖页面内任何未知的元素样式
- 1.内联样式：如
style="color:green",权重为1000 - 2.ID选择器，如
#app,权重为0100 - 3.类、伪类、属性选择器，如
.foo,:first-child,div[class="foo"],权重为0010 - 4.标签、伪元素选择器，如
div::first-line,权重为0001 - 5.通配符、子类选择器、兄弟选择器，如
*，>，+，权重为0000 - 6.继承的样式没有权值
如果选择器优先级一样，最后声明的生效
（数标签的数量）先数id,如果id相等再数类如果id不相等id多的选择器权重高，权重越高，优先级越高。如果id选择器数量相同，再数类选择器，最后数标签。
注意：比较权重的时候一定要注意：我们的选择器一定要命中对应的标签才可能让标签拥有对应的属性。
