CSS 冲突通常由两种情况引起
- 继承自不同祖先的样式
- 多个样式应用于同一个标签
对于第一种冲突，很好理解，nearest 祖先样式优先。
第二种冲突的实现很有趣，采用了打分机制。
一句话概括，即 tag 一分，class 十分，id 一百分，inline 一千分。得分高者胜！
例如：
- p 得1分
- .name p 得11分
- #name p 得101分
- #main #name p 得 1101分
- #name .content p 得 111 分
最终 #main #name p 获胜！
但是假设两个 style 得分一样呢？例如，.name a 与 p .name 得分均为 11, 这时哪个在样式文件的后面，哪个样式胜出。
当然，以上列举的情况非常极端，我想除了脑子被驴踢了的，很少有人会写出这种样式。最简单的记忆方法是，selector 描述的越精确，style 的优先级越高。
BTW: 当了爹真不容易，自学个 CSS 还得到客厅摸黑掐点。
关于作者 🌱
我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式