css样式加载顺序及覆盖顺序深入理解

在深研教材如w3schools等过程中，我们了解到CSS的样式优先级遵循一定的规则。通常，我们认为“元素上的style”的优先级高于“文件头上的style元素”，更高于“外部样式文件”。当我们在样式文件中遇到多个相同样式的定义时，其优先级的排列顺序是怎样的呢？

经过实践和进一步的，我们可以总结出以下的优先级规则：

1. 样式表的元素选择器的精确度决定了样式的优先级。具体来说，id选择器指定的样式 > 类选择器指定的样式 > 元素类型选择器指定的样式。这意味着，像navigator这样的id选择器定义的样式，其优先级会高于.current_block这样的类选择器定义的样式，即使你后来才添加.current_block的样式定义，它也无法覆盖先前的样式。

2. 对于相同类型选择器的样式，它们在样式表中的先后顺序也决定了样式的优先级。值得注意的是，这里的优先级是指样式表文件中的顺序，而不是在元素class出现的顺序。例如，在样式表中，.class2可能在.class1之后定义，但如果元素采用class="class2 class1"的方式指定，那么仍然是class2的样式优先级更高。在这种情况下，元素的颜色属性将为red，而不是black。

针对以上规则，对于初始遇到的问题，我们可以有两种解决方案：

方案一：将border从navigator中移出，放入一个新的类.block中，并将.block放在.current_block之前。这样可以确保navigator的样式不会被.current_block覆盖。

方案二：使用!important来指定某些样式的优先级。这样，即使其他样式的定义在后，带有!important的样式也会优先生效。对于你的情况，如果在navigator的border样式后添加!important，那么它将优先于.current_block的样式生效。

第二种方案可能更为简洁。通过了解并应用这些CSS优先级规则，我们可以更有效地管理和控制网页的样式表现。

需要注意的是，以上内容仅关于CSS的样式优先级规则及其在实际问题中的应用。与Cambrian的渲染函数无关，该函数在此未提及，因此不在的讨论范围内。