关于CSS样式的权重问题

当涉及到团队的大型项目时，没有内置于CSS中用于维护和管理，因此CSS面临的常见问题是：

缺乏代码结构或标准会大大降低可读性;
项目规模增加时的可维护性;
由于代码首先无法读取而导致的特殊性问题。

如果我们使用了一些框架如Boostrap什么的，我们就有可能遇到无法覆盖默认样式的问题，这个时候，我们就要考虑到选择器的特异性了。

比如我们来看以下两个样式：

body .card img {
   border: 10px solid green;
}

#content .card img {
   border: 10px solid blue;
}

这两个样式指向同一个图片，马一个会起重用呢，答案是第二个。
首先我们要搞懂选择器的权重，我们已知有四种：内联样式、ID选择器、类选择器、属性和元素选择器。
按照比重来看，内联样式权重为1000、ID选择器为100、属性选择器为10、元素和伪类为1。

让我们来看上面两个样式，第一个就是1+10+1=12，第二个就是100+10+1=111，明显第二个会覆盖第一个样式。