浏览器对于CSS不同类中的同属性不同值优先级问

小程序开发中CSS属性的叠加特性

在进行小程序开发时，我遇到了一个有趣的现象，并决定通过实例来详细。假设我们有一个HTML文件名为`csstest.html`，它引入了两个CSS文件：`1.css`和`2.css`。文件内容如下：

HTML部分：

```html

aaaaaaa

bbbbbbb

ccccccc

ddddddd

eeeeeee

fffffff

```

CSS部分（1.css）：

```css

.a{ cursor: pointer; font-size: 1em; }

.b{ cursor: move; font-size: 2em; }

.c{ cursor: crosshair; font-size: 3em; }

.d{ cursor: help; font-size: 4em !important; }

```

CSS部分（2.css）：

```css

.e{ cursor: progress; font-size: 5em; }

```

通过浏览器的审查元素功能，我们可以观察到以下特点：

1. 第一、第二段中的段落，虽然类a和类b的顺序不同，但最终鼠标样式均为“move”，字体大小均为2em。这说明，无论标签中的class属性里类的顺序如何，相同的属性值会选取CSS文件中声明位置最后的那个。

2. 第三、第四段中的段落，鼠标样式均为“progress”，字体大小均为5em。尽管先加载了1.css再加载2.css，但最终起作用的仍是类e的属性。这进一步证实了上述规律。

3. 第五、第六段中的段落，鼠标样式为“progress”，但字体大小有所不同。由于类d设定了!important，因此其字体大小为4em。这说明设定了!important的属性值会优先被选取。有趣的是，当类e的`font-size`也加上!important后，由于“!important”的优先级更高，所以字体大小会变为5em。这证明了在有多个相同属性且都设定了!important的情况下，还是会遵循一定的规律。

在CSS中，当为同一属性设置多个值时，最终起作用的值取决于多个因素，如属性的声明顺序以及是否使用!important等。在实际开发中，为了更好地控制样式，建议明确并遵循这些规则。