【常见问题01】CSS样式冲突的理解

一：原因

层叠、继承、优先级影响某元素的显示效果，因此有两个相同的规则作用到同一元素上，根据三方面的影响；会产生元素样式上的冲突

二：继承

子元素、孙子元素会继承父元素的某些样式；width、margin、padding、border等样式不具有继承属性；

三：层叠

1 影响层叠的三种因素

1. 资源顺序
   1. 指在权重相同的两种或多种样式应用于同一元素时，位于最后面的样式会产生效果
2. 优先级
   1. 优先级的高低主要有选择器决定，不同的选择器权重不同，累计权重高的选择器，会优先应用样式
   2. 具体如下：

      1. ID：选择器中包含 ID 选择器则百位得一分。
      2. 类：选择器中包含类选择器、属性选择器或者伪类则十位得一分。
      3. 元素：选择器中包含元素、伪元素选择器则个位得一分。

      通用选择器（*）、组合符（+、>、~、' '）和调整优先级的选择器（:where(