CSS的优先级机制是指在同一个样式属性被多次声明的情况下，浏览器将如何确定该属性所应用的样式。这个机制是由CSS规范所定义的。

在CSS中，有3种方式可以定义样式：

<style>
#main {
color: red;
}
</style>
<link rel="stylesheet" href="style.css">
<style>
.text {
color: blue;
}
</style>

在这三个例子中，我们都定义了color属性来设置文字颜色，但是，系统会根据某些规则判断哪个样式优先。

优先级的大小可以理解为一个值，来表示样式的重要程度。有以下四个值：

*important：10000
行内样式：1000
ID选择器：100
类选择器/伪类选择器/属性选择器：10
元素选择器/伪元素选择器：1
通配符、子选择器、后代选择器等没有特殊权重，按其出现次数计算

优先级是可以叠加的，可以结合多个选择器形成一个总的优先值，最终值就等于相加之和。当样式冲突时，系统会按照优先级从大到小筛选，优先级大的样式将会覆盖优先级小的样式。

以下这个例子，可以清晰的展示CSS优先级机制的工作方式：

<style>
#main p:first-child {
color: red;
}
p {
color: blue;
}
.text {
color: green;
}
span {
color: purple;
}
</style>
<div id="main">
<p>This is a test.</p>
<p>This is another test.</p>
<span class="text">This is a span.</span>
</div>

在这个例子中，ID选择器#main p:first-child优先级是：100 + 1= 101。说明color:red会覆盖其他样式。

同理，p选择器的优先级是1，而类选择器.text的优先级是10。因此，#main p:first-child的优先级大于text类选择器，但小于ID选择器。

最后，如果都没有找到任何与选择器匹配的样式规则，浏览器会使用其默认的样式：

p {
color: #333;
}

以上就是CSS优先级机制的详细介绍。